3divs并排(bootstrap)

I have 3 divs with float: left; first one is the title which cant be with fixed width. second is an image which is 150x150 and third is a paragraph which should spread to all available space.

我有三个divs和float:左边;第一个是不能固定宽度的标题。第二幅是150×150的图像，第三幅是应该扩展到所有可用空间的段落。

Everything works great if the paragraph is short (only if it has one line it works) but if it is longer the paragraph is messed up. the second line doesnt go under the first one, and the whole paragrah goes under the title and image.

如果段落很短，一切都很好(只有在有一行的情况下才有效)，但是如果段落太长，就会一团糟。第二行没有在第一行下面，整个滑翔伞都在标题和图片下面。

Im trying to accomplish this 3divs并排(bootstrap)

我正努力做到这一点

And this is the what Im getting 3divs并排(bootstrap)

这就是我得到的

markup is this

这是标记

<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>

in css beside styling (color, font-size..) there is only float: left; padding on container-paragraph is 50px 35px, and margin is 0;

在css中除了样式(颜色，字体大小)，只有浮动:左;集装箱段的内边距为50px 35px，边距为0;

I'm using latest bootstrap and wordpress

我用的是最新的bootstrap和wordpress

2 个解决方案

#1

I would float the first two items and then not float the third item but set overflow:hidden on it instead which will allow it to fill the remaining space in a rectangualr block.

我将浮动前两个项目，然后不浮动第三个项目，而是设置溢出:隐藏在它上面，这样它就可以在rectangualr块中填充剩余的空间。

No dimensions needed but be aware should your title get too long it will take up the whole row so perhaps a max-width on the title would be a good idea.

不需要维度，但是要注意，如果你的标题太长，会占用整行，所以标题上的最大宽度可能是个好主意。

<!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>

#2

You should use bootstrap specific markup. In your case it could look like:

您应该使用引导特定的标记。在你的情况下，它可能是:

<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>

You can choose the col-xs(?) depending on your needs. For more help some jsFiddle would be nice!

您可以根据需要选择colx(?)。对于更多的帮助，一些小提琴会很好!

#1