Question

我无法找到一个示例，其中两个div对齐左侧，另一个对齐右侧，这些div位于同一条线上而未将width设置为它们。我还需要一个响应式解决方案。有什么想法吗？

＆＃13;

.left {
  float: left;
}
.right {
  float: right;
}

＆＃13;

<div>
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    The solution comes from the display property. Basically you need to make the two divs act like table cells. So instead of usign float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div...
  </div>
</div>

＆＃13;

Answer 1

只需删除float:left - 您是否在寻找此结果？

.right {
  float: right;
}

<div>
  <div class="right">
      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    The solution comes from the display property. Basically you need to make the two divs act like table cells. So instead of usign float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div
  </div>
</div>

Answer 2

您的解决方案是flexbox

所以代码是这样的： http://codepen.io/sandrina-p/pen/ZOWNzP

.container { //the parent 
    display: flex;
    justify-content: space-between;
}

但是注意，这只支持IE10 +。您可以在此处查看有关支持的更多信息： http://caniuse.com/#search=flexbox

Answer 3

如果你先浮动第一种方法，你只需要设置float: right，就像它目前一样。并且文本将自动包裹在图像下方。不要忘记通过将overflow: auto;添加到容器中来清除浮动。

＆＃13;

.container {
  overflow: auto;
}
.right {
  float: right;
}

＆＃13;

<div class="container">
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
</div>

＆＃13;

如果您需要将两个div并排放置而不进行换行，则可以将overflow: auto添加到左侧div。

＆＃13;

.container {
  overflow: auto;
}
.right {
  float: right;
}
.left {
  overflow: auto;
}

＆＃13;

<div class="container">
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
</div>

＆＃13;

或者使用CSS表，就像你在文中提到的那样。

＆＃13;

.container {
  display: table;
  width: 100%;
}
.left, .right {
  display: table-cell;
  vertical-align: top;
}

＆＃13;

<div class="container">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl,
    nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna.
    Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor.
  </div>
  <div class="right">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" />
  </div>
</div>

＆＃13;

在同一行上对齐两个div而不设置宽度

3 个答案: