Question

我正在尝试布局页面，但是我无法按照自己的意愿让我的div工作。

这就是我的页面出现的方式

My page

但是我希望所有的文字内容都被推到右边，并且会议参加了会议：＆＃39;在化身旁边，在化身所在的地方根本没有任何文字。就像有两个盒子，一个小的瘦子，一个是化身的宽度和整个容器的高度，另一个是文本内容的宽度和容器的高度。

这是我的HTML ...

<div class="well row">

        <div style="height: 100%; float: left;">
            <img class="review-img" src="src" alt="Thumbnail">
        </div>
        <div class="review">
            <strong>Session attended: </strong>All about the Box...ing<br>
            <p style="padding-top: 8px;">Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes. Gumby likes.</p>
            <span>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                     Gumby  
                    <strong class="recommended"><i class="fa fa-check-circle"></i> Recommends</strong>
                    10/27/2014
            </span>
        </div>
    </div>

使用此CSS

.review {
    float: left;
}

.review-img {
    height: 80px;
    border-radius: 8px;
}

.review {
    padding: 8px;
}

.review span {
    display: inline-block;
    padding-top: 12px;
}

我正在使用Bootstrap，如果从上述材料中看不出来的话。我觉得这应该很简单，因为它基本上只是在更大的容器内定义2个容器并将它们左侧浮动，但由于某种原因它给了我麻烦。

修改

这是我的代码http://jsfiddle.net/ta37frf3/

的jsfiddle

Answer 1

听起来你不熟悉Bootstrap's grid system。总而言之，在创建行之后，您需要在内部元素上使用col-screensize-columnsize，以便在页面上创建响应列。您可以删除CSS并使用它：

<div class="row">
    <div class="col-xs-4">
        <img class="review-img" src="src" alt="Thumbnail">
    </div>

    <div class="col-xs-8">
        <!-- all your text -->
    </div>
</div>

Bootstrap是一个非常强大的CSS框架，您应该始终查阅文档，看看您尝试完成的内容是否已在Bootstrap中实现。

注意：我假设您使用的是最新版本的Bootstrap，Bootstrap 3。

Answer 2

试试这个

.review {
    padding: 8px;
    width:70%;
    box-sizing: padding;
}

而是100％宽度给div提供30％

<div style="height: 30%; float: left;">

demo

Answer 3

如果你删除它，你应该得到我理解你想要的东西：

.review {
    float: left;
}

修改

为了更接近，您可以将您想要的句子封装在图像上，从而删除<br>以及下一个元素上的padding-top。然后你可以定位它来调整它的高度和边距。

（我用彩色div替换了img，所以我们可以很好地看到它）

编辑2

我再次添加了padding-top并清除了文本框，因此它永远不会出现在图像上。

更新了jsfiddle

Answer 4

你必须给自己的头像<div class="avatar">，然后把它漂浮在你的CSS中。您的评论也将<div class="comment">向右浮动。请记住清除这两个项目，以便下一个项目可以正常进入。

Answer 5

如果您使用Bootstrap 3，您可以使用内置Bootstrap 3的媒体对象组件：

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="review-img" alt="thumbnail">
    </a>
    <div class="media-body">
        <strong>Session attended: </strong>All about the Box...ing
    </div>
</div>

Answer 6

从评论中删除float并向家长提供一些保证金。

在集装箱中定位分部

6 个答案:

Fiddle