-1

私はこのレイアウトを持っています。

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

デスクトップでは、各 div が独自のセクションにあるスタイルのままにしておきます。内部には何も浮かんでいません。

モバイルでは、左部分をコメントの左上に置き、右部分をコメントの右側に移動して、このように囲みます..

|-------| 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 に答える