Question

我有3个div与浮动：左; 第一个是不能固定宽度的标题。第二个是150x150的图像，第三个是应该扩展到所有可用空间的段落。

如果段落很短（仅当它有一行有效），一切都很有效但如果段落较长则段落搞砸了。第二行不在第一行之下，而整个paragrah都在标题和图像之下。

我正在尝试完成此 enter image description here

这就是我得到的 enter image description here

标记就是这个

<div class="row row-list">
    <h3>title</h3>
    <div class="container-img"><img src=""></div>
    <div class="container-paragraph"><p>lorem ipsum</p></div>
</div>

除了样式（颜色，字体大小......）之外的

中只有float：left; container-paragraph上的填充为50px 35px，margin为0;

我正在使用最新的bootstrap和wordpress

Answer 1

您应该使用引导程序特定标记。在你的情况下，它可能看起来像：

<div class="row row-list">
    <div class="col-xs-3"><h3>title</h3></div>
    <div class="col-xs-2 container-img"><img src=""> </div>
    <div class="col-xs-7 container-paragraph"><p>lorem ipsum</p></div>
</div>

您可以根据需要选择col-xs(?)。为了更多的帮助，一些jsFiddle会很好！

Answer 2

我会浮动前两个项目，然后不浮动第三个项目，但设置overflow：隐藏在它上面，这将允许它填充rectangualr块中的剩余空间。

不需要尺寸，但要注意如果你的标题太长，它会占用整行，所以标题上的最大宽度也许是一个好主意。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.row-list {
    border-bottom:1px solid #000;
    background:#f9f9f9;
}
.container-img {
    width:150px;
    height:150px;
}
.container-img img {
    display:block;
    background:red;
    width:100%;
    height:auto;
}
.container-img, .title {
    float:left;
    vertical-align:top;
    margin:0 10px 10px;
}
.container-paragraph {overflow:hidden}
</style>
</head>

<body>
<div class="container">
        <div class="row row-list">
                <h3 class="title">title</h3>
                <div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
                <div class="container-paragraph">
                        <p>lorem ipsum</p>
                </div>
        </div>
        <div class="row row-list">
                <h3 class="title">title with longer text</h3>
                <div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
                <div class="container-paragraph">
                        <p>lorem ipsum</p>
                </div>
        </div>
        <div class="row row-list">
                <h3 class="title">title</h3>
                <div class="container-img"><img width="150" height="150" src="http://www.placehold.it/250x150"></div>
                <div class="container-paragraph">
                        <p>lorem ipsum</p>
                        <p>lorem ipsum</p>
                        <p>lorem ipsum</p>
                        <p>lorem ipsum</p>
                        <p>lorem ipsum</p>
                </div>
        </div>
</div>
</body>
</html>

并排3个div（bootstrap）

2 个答案: