2

画像の右側に順序付けられていないリストを浮かせようとしています。私のhtmlは次のようになります：

<img src="..." class="left" alt="" />
<h3>Internet Explorer Shortcut keys</h3>
<ul>
<li>Go to the web page that you want to view</li>
<li><strong>Explorer Shortcut keys</strong>: Press <strong>Shift+F12</strong> and the code should appear in a separate window</li>
<li>If this does not work, hold the mouse pointer over a blank part of the web page, right click and choose "<em>HTML</em>".</li>
<li>Alternatively from the menu bar select <em>View</em> and choose "<em>HTML</em>" or "<em>Source</em>" depending on the version you are using.</li>
</ul>

CSS はかなり複雑ですが、次のようになります。

.itemFullText ul {margin:20px 0 30px 10px;padding-left:0px;list-style:none;float:left;}
.itemFullText ul li {margin:0 0 6px;padding:0 0 0 30px;float:none;background:url(http://www.jeyjoo.com/img/s.png) -381px 0px no-repeat;line-height:22px;font_weight:bolder;display:block;}
.itemFullText ul li {
    background: url("http://www.jeyjoo.com/img/s.png") no-repeat scroll -381px 0 rgba(0, 0, 0, 0);
    display: block;
    float: none;
    line-height: 22px;
    margin: 0 0 6px;
    padding: 0 0 0 30px;
}

実際のページはこちら。ありがとう

4

3 に答える 3

1

最も簡単なオプションは、CSS3 フレックスボックスを使用することです。

ul/img要素をラップしてdisplayから、ラッパー要素の を次のように設定しますflex。

.wrapper {
  display: flex;
}
<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>

または、CSS テーブルを使用displayしてラッパー要素の をtableに設定しdisplay、次に子ul/img要素の を に設定することもできtable-cellます。

.wrapper {
  display: table;
}
.wrapper ul,
.wrapper img {
  display: table-cell;
  vertical-align: top;
}
<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>

于 2013-10-21T00:13:06.523 に答える
0

画像の幅が常に同じ (200px) のように見える場合は、フロートを から削除して<ul>に変更padding-left: 0できpadding-left: 210pxます。

210px と言ったのは、画像の幅に 10 を加えて、その上の見出しに合わせるためです。

于 2013-10-21T00:12:54.050 に答える