Question

我正在尝试制作详细列表，其中包含两侧的图像，与此类似

图像图像一个列表图像图像

（还有多个dt＆＃39; s和dd＆＃39;）

我的问题是我可以将图像对齐并且列表也是如此，但图像会像这样出现在列表之前。图片图片

图片图片

  then the list

我可以使用它来处理列表中的图像但这会给我带来错误，因为图像不能在列表中。这是我使用

的一部分

dl {
text-align: center;
width: 500px;
margin-left:400px; 
margin-right:400px;
}

.floatright {
float: right;
}
.floatleft {
float: left;
 }

<img class="floatleft" src=....
<img class="floatright" src=...
<img class="floatleft" src=....
<img class="floatright" src=...

<dl>
<dt>heading</dt>
<dd>details
</dd>
<dt>heading</dt>
<dd>details etc...
</dd>
</dl>

Answer 1

你可以这样做，使用div来包围列表，并使用内联块样式。虽然内联样式是不受欢迎的，但我觉得更容易为此简单地演示它，你可以随时将其移动到外部css文件，如果你想

<html>
<body>
    <div style="width:780px; border:red solid 1px;">
        <img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/><img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/>
        <div style="display:inline-block; border:solid black 1px; vertical-align: top;">
            <dl>
              <dt>Coffee</dt>
              <dd>Black hot drink</dd>
              <dt>Milk</dt>
              <dd>White cold drink</dd>
            </dl>
        </div>
        <img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/><img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/>
    </div>
</body>
</html>

Answer 2

我这样做了dl

    font-size:25px;
    margin-left:auto;
    margin-right:auto;

在这里您可以看到输出结果http://jsfiddle.net/u2peomur/

图像的宽度和高度设置为50.您可以根据需要进行更改。还可以根据需要更改字体大小

在图像之间放置详细列表。（CSS / Html）

2 个答案: