相关疑难解决方法(0)

我试图让父div只和子div一样宽.自动宽度使父div适合整个屏幕.子div将根据其内容的宽度不同,所以我需要父div来相应调整.

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl> …

比方说,父div有两个子div,一个包含文本,另一个包含已知(但可变)宽度和高度的图像.

我想要

• 第一个子(包含图像)div的宽度缩小以适应图像的宽度(我可以这样做)
• 父div(未指定的宽度)缩小以适合包含图像的div的宽度(这也可以)
• 包含文本的第二个子div(也是未指定的宽度)与父div的宽度相匹配,而不管它包含的文本数量(这是它变得棘手的地方).

我有一个可以做我想要的工作版本,直到第二个孩子的文本数量推动父div的宽度比图像的宽度更宽.

这是我的代码:

CSS:

#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}

HTML:

<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>

这里有一个jsfiddle:http: //jsfiddle.net/BmbAS/1/

您可以通过单击"延长/缩短文本"链接来查看出错的位置,以增加文本数量

tldr - 我希望所有的div都是相同的宽度,它等于图像的宽度

PS.现代浏览器解决方案只需要

如何使div自动宽到足以容纳漂浮的孩子？

<div class="Parent"> <!-- 3 Children, should be 450px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
  <div class="Child"></div>
</div>
<div class="Parent"> <!-- 2 children, should be 300px wide-->
  <div class="Child"></div>
  <div class="Child"></div>
</div>

Child divs都是"float:left",具有固定的宽度.如何让Parent div等于浮动子的宽度？每个父母中的孩子数量各不相同,但未知,但孩子们必须连续排队,而不必换行.

示例:如果所有三个子项都是150px,则父项应该变为450px,以便没有子项包装.如果有两个150px的孩子,父母应该变成300px.

更新:

"小提琴"非常酷.这是一个问题的演示:http: //jsfiddle.net/AG3c9/6/

当您将鼠标悬停在动物身上时,您可以看到鸟类,爬行动物和鱼类堆叠在一起.它们应该并排显示.

这就是我想要的样子:http: //jsfiddle.net/AG3c9/8/

我通过强制父级为固定宽度得到它.但是父母需要根据孩子的不同而不同而不是固定的宽度.