logo标签列表

3个并排的div（bootstrap）

htmlcsstwitter-bootstrap
4
我有三个div，其中第一个是标题，宽度不能固定；第二个是一个150x150的图像；第三个是一个段落，应该占用所有可用空间。如果段落很短（只有一行），那么一切都很好。但是，如果它很长，段落就会乱掉。第二行不会在第一行下面，整个段落会跑到标题和图像下面。我想要实现这个: 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>

在 CSS 中，除了样式（颜色、字体大小等）之外，只有 float: left;。容器段落的填充为 50px 35px，边距为 0；我正在使用最新的 Bootstrap 和 WordPress。
请提供您的CSS。 - Kamil
请检查这个 fiddle：fiddle。 - Gibbs
你为什么要使用Bootstrap？ ^^ - Steven Web
默认情况下，<<h3>> 不会向左浮动，也不会装饰。哪一部分是用来使其浮动的？ - Jon Jay Obermark
2个回答
9
您应该使用Bootstrap特定的标记。在您的情况下，它可能看起来像这样：

您应该使用特定于Bootstrap的标记。在您的情况下，它可能如下所示：

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

我会将前两个项目浮动起来，然后不浮动第三个项目，而是设置overflow:hidden属性，这将允许它填充矩形块中的剩余空间。

没有必要设置尺寸，但请注意，如果您的标题太长，它将占用整行，因此在标题上设置max-width属性可能是一个好主意。

<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接