我目前正在为类期末考试制作一个“模型”网站，我们的老师让我们在 Dreamweaver 上开始它。有史以来最糟糕的经历。
我已经完成了很多工作，我不想重新开始。但是，我无法让 div 中的文本环绕另一个 div 中的图像。
教授做到了。不知道他是怎么做到的。
这是索引页和 CSS:
@charset "UTF-8";
body {
margin: 0px;
background-color: #FFF;
}
#wrapper {
height: 500px;
width: 1001px;
background-color: #666;
margin-right: auto;
margin-left: auto;
position: relative;
}
nav {
clear: both;
float: left;
height: 50px;
width: 1001px;
background-color: #FFFFFF;
color: #CC5072;
position: static;
text-align: center;
}
aside {
background-color: #FFFFFF;
float: left;
width: 330px;
height: 310px;
margin-top: 10px;
margin-left: 2px;
}
#column_l {
background-color: ;
float: left;
margin-top: 4px;
margin-left: 4px;
}
footer {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10px;
font-style: italic;
font-weight: lighter;
font-variant: normal;
color: #00CC00;
background-color: #666;
text-align: center;
width: 1001px;
float: left;
padding-top: 5px;
}
#column_r {
float: right;
height: 300px;
width: 300px;
position: static;
background-color: ;
margin-top: 4px;
margin-right: 2px;
color: #029900;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#content {
background-color: #FFFFFF;
float: right;
height: 310px;
width: 659px;
position: static;
margin-top: 10px;
margin-right: 2px;
}
#aside_content {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #090;
margin-right: 3px;
margin-left: 2px;
margin-top: 4px;
}
#aside_content hgroup {
padding: 0px;
}
nav li {
display: inline;
}
nav ul {
margin: 0px;
padding: 0px;
}
#nav_content {
padding: 10px;
word-spacing: .5em;
}
.scrollable {
height: 300px;
overflow-y: auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
</head>
<div id="wrapper">
<header>
<img src="Images/banner.jpg" width="1001" height="100" alt="banner">
<nav>
<div id="nav_content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
<li><a href="signingpage.html">Signing Page</a></li>
</ul>
<!--closing nav_content-->
</div>
</nav>
</header>
<aside>
<div id="aside_content">
<h2>Calander</h2>
<h3>November</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id lectus ac enim dignissim convallis. Nam arcu elit, tempor non molestie porttitor, malesuada in tellus. Curabitur nec adipiscing lacus. Quisque fermentum dolor eget ligula euismod, vitae
eleifend ante imperdiet. Vestibulum laoreet nunc eu vulputate tempus. Vivamus mollis enim mi, sed viverra mi placerat et. </p>
</div>
</aside>
<div id="content">
<div id="column_l">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
<section>
<article>
</article>
</section>
</div>
<div id="column_r">
Praesent nisl urna, aliquam sit amet rhoncus condimentum, faucibus sit amet metus. Donec pulvinar erat eget tellus mollis porta. Morbi sit amet lacinia libero. Sed mollis lectus sed mauris pretium commodo. Pellentesque feugiat, odio eu vulputate vulputate,
ante eros ornare sapien, non ullamcorper ante erat in sapien. Vivamus molestie auctor elementum. Nullam facilisis leo dolor, eget pretium diam eleifend nec. Morbi nec aliquam augue. Suspendisse nec turpis sed metus tristique molestie. Donec iaculis
placerat dignissim. yhjdsuligbkjrfhkbedsh</div>
</div>
<footer>
Sharisa Amanda Mohammed - November.11.2013
</footer>
</div>这将是两个 div
<div id="content">
<div id="column_l">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
<section>
<article>
</article>
</section>
</div>
<div id="column_r">
Praesent nisl urna, aliquam sit amet rhoncus condimentum,
</div>
</div>
这就是与之相关的 CSS 吗？
#column_l {
background-color: ;
float: left;
margin-top: 4px;
margin-left: 4px;
}
#column_r {
float: right;
height: 300px;
width: 300px;
position: static;
background-color: ;
margin-top: 4px;
margin-right: 2px;
color: #029900;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
#content {
background-color: #FFFFFF;
float: right;
height: 310px;
width: 659px;
position: static;
margin-top: 10px;
margin-right: 2px;
}
不确定我这样做是否正确。这个网站非常新。我在谷歌上搜索答案并偶然发现了这一点。
最佳答案
目前，右侧列有 2 个不同的父 div，这就是文本不换行的原因。你需要做的就是将图像与文本放在同一个div中，然后在图像上设置float:left，文本就会自动换行。您可能还想在图像周围添加填充，以便文本不会直接到达图像的两侧。
如果您需要将图像放在它自己的 div 中，只需将整个 div(打开和关闭标签)放在文本 div 中，它应该具有相同的效果。然后只需将 float:left 设置为图像 div 而不是图像本身。
这是一个 div 解决方案:
HTML
<div id="column2">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>
CSS
#column2 img {
float:left;
padding:5px;
}
这是两个 div 解决方案:
HTML
<div id="column2">
<div class="left">
<img src="Images/poster.jpg" width="340" height="265" alt="poster">
</div>
Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>
CSS
.left {
float:left;
padding:5px;
}
关于html - 如何将包含文本的 div 包裹在包含图像的 div 周围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20337768/