Question

使用Bootstrap 2.3我创建了两个.gold-ratio .span6个父div，每个div包含一个.left-ratio和.right-ratio div。我的.left-ratio div内部是一个图像，.right-ratio div内部是一些描述图像的文本。但是，我的.left-ratio div填充了父div，.right-ratio div中的文本无法找到。一切都设置为float: left，并且两个子div都是display: inline-block。不确定为什么图像占用了所有东西。

JSFIDDLE

HTML：

<div class="row center">
           <ul class="thumbnails">
                <li class="span6" id="item1">
                    <div class="gold-ratio">
                        <div class="ratio-left" id="pic1">
                            <img src="img/arch/studio4_1.jpg"/>
                        </div>
                        <div class="ratio-right">
                            <h3>Some Info</h3>
                            <p>Detailed Info</p>
                        </div><!--/.ratio-right-->
                    </div><!--/.gold-ratio-->
                </li><!--/.span6-->

                <li class="gold-ratio span6" id="item2">
                    <div class="ratio-left" id="pic2">
                        <img src="img/arch/studio4_1.jpg"/>
                    </div><!--/.ratio-left-->
                    <div class="ratio-right">
                        <h3>Some Info</h3>
                        <p>Detailed Info</p>
                    </div><!--/.ratio-right-->
                </li><!--/.gold-ratio .span6-->
           </ul><!--/.thumbnails-->
    </div><!--/.row .center-->

CSS：

.gold-ratio {
    display: block;
    float: left;
    overflow: hidden;
    height: 300px;
}

.left-ratio {
    display: inline-block;
    float: left;
}

.right-ratio {
    display: inline-block;
    float: left;
    width: 200px;
}

编辑：我使用的图像比div大，所以我左边的div切断了所有溢出。

更新JSFIDDLE

由于声誉不佳，我无法发布照片，但也许这会有所帮助：

我有什么：

___________________
|                 |
|                 |
|_________________|

这就是我想要的：

___________________
|             |   |
|             |   |
|_____________|___|

Answer 1

将标记与CSS规则链接时出错。在您的HTML中，我可以看到<div class="ratio-left">和<div class="ratio-right">，但在您的样式表中，您尝试设置.left-ratio和.right-ratio的样式。

正如您所看到的那样here，修复此规则可以解决问题并使其表现为我相信您期望的行为。

更新

要解决您的问题，您必须更好地了解浮动的工作原理。我将尽量简明扼要地解释它，并简单地坚持手头的问题，而不是深入了解CSS中最复杂的一个方面的细节：

当一个元素浮动时，它会尽可能地按照包含元素的浮点属性指定的方向推送。与绝对定位元素相反，浮动元素仍然是文档流程的一部分。简而言之，这意味着它们占据了它们的空间。

在你的情况下，这就是问题所在。

您有一个宽度固定的容器（li.span6）。在此元素中，您有另一个包含两个容器（div.golden-ratio和div.left-ratio）的容器（div.right-ratio）。最后两个容器设计为float:left（你可以摆脱display: inline，因为浮动的元素会自动变成一个盒子;也许你正在查看display:inline-block这可以节省你的很多头疼的事。）

但是，由于最后两个容器没有固定的宽度，因此它们会占用其内容的任何宽度。

div.left-ratio获取其中img的宽度;这不受约束，而是max-width: 100%。这指的是div.span6的100％，因为它是具有固定宽度的最后一个元素。

通过占据整个空间div.left-ratio推动下一行div.right-ratio 。如果您说它无处可寻，那是因为您的div.golden-ratio设置了overflow:hidden属性，并且具有固定的高度。 overflow: hidden表示：隐藏超出固定宽度/高度的所有内容;因此，推送元素正在消失。

要实现您想要的目标，必须为div.righ-ratio 留出空间，方法是为div.left-ratio（或其内容）提供一些宽度限制（无论是像素，百分比）或者你想要的任何东西）。在this updated example中，我向您展示了如何做到这一点。

......好吧...... 简洁 ......

父母div中的并排子div

1 个答案:

更新