Divを箇条書きリストに合わせる

私の箇条書きをdiv画像の隣に正しく配置しようとしています。 https://jsfiddle.net/tzhvdpj7/Divを箇条書きリストに合わせる

あなたは箇条書きの私の最後のセットを見ることができるの例からしているこれまで、他の隣接する2下：

は、ここに私のフィドルのリンクです。

HTML：

<body> 
<img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<br> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<br> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 


<p>&nbsp;</p> 
<p>&nbsp;</p> 

<div style="float: left; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
</ul> 
</div> 
<div style="float: left; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
</ul> 
</div> 
<div style="float: right; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<br> 
</ul> 
</div>

CSS：

.right { 
    float: right; 
    padding: 0px 0px 20px 30px; 
} 

.p { 
    text-indent: 30pt; 
}

すべてのヘルプここでは誰？これに固執していました..

出典

2017-04-26 buzzin

幅を使用しないでください：最後の第三のdiv内33％が – Nimish

あなたが必要とする出力は何ですか。画像/スクリーンショットを共有できますか？ –

divを小さくして、幅を28％にしてください。しかし、それを変更することができます。

.right { 
 
    float: right; 
 
    padding: 0px 0px 20px 30px; 
 
} 
 

 
.p { 
 
    text-indent: 30pt; 
 
}

<body> 
 
    <img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 

 
    <p>&nbsp;</p> 
 
    <p>&nbsp;</p> 
 

 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    </div> 
 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    </div> 
 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <br> 
 
    </ul> 
 
    </div>

出典

2017-04-26 09:58:29

これはうまくいった！ありがとう！ – buzzin

Divを箇条書きリストに合わせる

答えて

関連する問題