gpt4 book ai didi

html - 在图像之间放置详细列表。(CSS/Html)

转载 作者:太空宇宙 更新时间:2023-11-04 12:15:38 25 4
gpt4 key购买 nike

我正在尝试制作一个类似于此的两面都有图像的详细列表

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

(也有多个dt和dd)

我的问题是我可以让图像和列表正确对齐,但是图像像这样排在列表之前。图片图片

图片图片

图片图片

  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>

最佳答案

你可以这样做,使用 div 包围列表,并使用内联 block 样式。虽然内联样式不受欢迎,但为了简单起见,我觉得这样更容易演示,你总是可以将它移动到外部 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>

关于html - 在图像之间放置详细列表。(CSS/Html),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28741084/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com