-1

我有这个布局。

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

在桌面上，我将其保留为每个 div 位于其自己的部分中的样式，内部没有任何东西浮动。

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

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

如何在不更改我的 html 代码的情况下实现这一目标？

4

1 回答 1

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;
}
于 2013-09-17T03:03:18.253 回答