Question

将内容集中在div中

这一切都很好，但我有一个问题。

我有2个div，每个占用50％的宽度。左div包含一个长度为px`的图像。右div包含文本。我可以设置包含文本的div的高度，但是，当我使屏幕变小时，它没有响应。任何人都可以告诉我，如果有一个，当屏幕尺寸缩小时，降低div高度的技术会降低吗？

我希望并排保留2个div，并在屏幕变小时减小右侧div的高度，与右侧图像缩小的速度相同。

请参阅jsfiddle HERE和以下代码演示：

HTML

<div class="left">
   <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
</div>

<div class="right">
  <div class="table">
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
  </div>
</div>

CSS

img {
  width: 100%;
}

.left, .right {
  float: left;
  width: 50%;
}

.table {
  height: 400px;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

Answer 1

为什么你用这个表？使用flex。

img {
  width: 100%;
}
.left,
.right {
  width: 50%;
  /* float: left; */
}
/*
.table {
  height: 400px;
  display: table;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
*/
body {
  display: flex;
  align-items: center;
}

<div class="left">
  <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
</div>

<div class="right">
  <div class="table">
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
  </div>
</div>

Answer 2

试试flexbox。更新了小提琴here。

＆＃13;

.wrapper {
  display: flex;
  align-items: center;
}
.child {
  flex: 1;
}
img {
  width: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="child">
    <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
  </div>

  <div class="child">
    <p>Test</p>
    <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
  </div>
</div>

＆＃13;

Answer 3

我发现以下修订后的html结构正在运行

<div class="table">
    <div class="table-cell">
      <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
    </div>
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
</div>

虽然您必须将.table的高度更改为height: auto;

或者您可能希望使用代表视点高度的单位vh高度：尝试height: 50vh;

Answer 4

我更新了你的小提琴：https://jsfiddle.net/9bjan951/4/

基本上我做过的事情：

添加了一个包装元素
清除浮动，因此包装器获得高度
将右栏设置为绝对位置，并始终将其父级的高度设为100％
将右表设置为100％高度
对于窄屏幕，文本将以滚动条溢出

魔法的大部分发生在这里：

.right {
  height: 100%;
  background: #c54a8d;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: auto;
}

我希望这会有所帮助。

垂直对齐中间表格单元格响应文本

4 个答案: