Question

我有这种布局。

<div class="comment">
<div class="leftpart">
</div>
<div class="rightpart">
</div>
</div>

在桌面上，我把它保留为每个div在其自己的部分中的样式，没有任何内容浮动。

在移动设备上，我希望leftpart位于评论的左上角，右边部分位于右边，然后像这样环绕它..

|-------| Right div |
|Left   | right div |
|  div  | right div |
|<auto->| right div |
|-------| right div |
|right div this div |
|<--- 100% width--->|

如何在不更改html代码的情况下实现此目的？

Answer 1

为了将元素位置强制到一侧，您应该使用float CSS属性。 通过将.leftpart浮动到左侧，它将保留在那里并在.comment div上创建其余内容，并将其环绕。

我做了这个例子：http://jsfiddle.net/gespinha/yN7KP/2/

这是你在找什么？

HTML

<div class="comment">
    <div class="leftpart"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut neque lacus, imperdiet vitae condimentum a, aliquam ut ante. Vivamus nulla quam, rutrum sit amet augue a, semper gravida eros. Nulla sit amet fermentum est, eget lobortis dui. Cras ut pretium justo. Nunc tortor risus, vulputate nec accumsan id, fermentum vulputate felis. Suspendisse mi quam, molestie sit amet pellentesque lobortis, placerat vel nisi. Ut scelerisque lacus magna, quis volutpat purus vulputate at. Sed volutpat risus sit amet lectus sollicitudin porta. Aenean tempus quis est vitae pretium.</p>
</div>

CSS

.comment {
    width:300px;
    padding:5px;
    background:#f00;
}
.leftpart {
    width:150px;
    height:250px;
    margin:0 10px 10px 0;
    background:#0f0;
    float:left;
}

如何在div左上角包围div

1 个答案: