gpt4 book ai didi

HTML5 和 CSS3 : Align text next to image

转载 作者:可可西里 更新时间:2023-11-01 13:35:39 25 4
gpt4 key购买 nike

图片彼此正确对齐,但文本仅出现在第一张图片旁边。

我希望第一个 h2 和 p 出现在第一张图片旁边,第二个 h2 和 p 出现在第二张图片旁边。

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Yoko Lounge</title>
<meta name="author" content="Yoko"/>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Yoko Lounge</h1>
</div>
<div id="nav">
<ul>
<li class="current">Home</li>
<li>Forum</li>
<li>Members</li>
<li>Calendar</li>
<li>Logout</li>
</ul>
</div>
<div id="figs">
<img class="figure" src="bok-choi.jpg" alt="bok"/>
<h2>Best Plant</h2>
<p>This plant gives you health.</p>
<img class="figure" src="teriyaki.jpg" alt="teriyaki"/>
<h2>Teriyaki Health Plant</h2>
<p>This plant gives you health.</p>
</div>
</div>
</body>
</html>

CSS:

body {
background: url("dark-wood.jpg");
margin: 0px;
}

#wrapper {
width: 920px;
margin: 20px auto;
border: 2px solid black;
}

#header {
height: 130px;
background: url("header.jpg");
}

h1 {
text-indent: -9999px;
margin: 0px;
}

#nav {
background: #AEACA8;
color: #FFFFFF;
height: 30px;
}

#nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}

#nav li {
display: inline;
margin-right: 40px;
}

#nav ul li.current, #nav ul li:hover {
color: black;
}

#content {
background: #FFFFFF;
color: black;
width: 100%;
}

#figs {
background: #FFFFFF;
color: black;
float: left;
width: 70%;
}

img.figure {
display: block;
border: 1px solid black;
margin: 20px 20px;
float: left;
}

最佳答案

你应该添加一个 <div style="clear: both"></div>在第二张图片之前。这将强制下一个元素在左浮动的前 3 个元素下方流动。

关于HTML5 和 CSS3 : Align text next to image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17177529/

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