Question

我目前正在为一个班级决赛的“模拟”网站工作，我们的老师让我们在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;
}

不确定我是否做得对。这个网站非常新。我在谷歌搜索答案，偶然发现了这一点。

Answer 1

目前，右侧列有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;
}

如何在包含图像的div周围包含包含文本的div？

1 个答案: