将图片放在 div 下

Question

我无法将图像定位在边栏下方 div What it looks like

我不确定我需要使用浮动、位置等的天气。很抱歉这个愚蠢的菜鸟问题，但我就是想不出来。

提前致谢。

#outer {
  float: left;
  background-color: white;
  border-style: outset;
  border-width: 5px;
  border-color: rgb(127, 127, 255);
  padding: 5px;
}
#inner {
  float: left;
  position: relative;
  color: white;
  border-style: outset;
  border-width: 5px;
  border-color: rgb(191, 233, 191);
  padding: 5px;
  margin: 5px;
}
#image {
  float: left;
}

<div id="outer">
  <h1> The Chandra space-based X-Ray Observatory</h1>

  <div id="inner">
    <a href="http://science.nasa.gov/astrophysics/focus-areas/black-holes/">Nearby black hole</a>
    <br>
    <a href="http://www.nasa.gov/mission_pages/chandra/news/07-139.html" />'Death Star' Galaxy Black Hole</a>
    <br>
    <a href="http://www.nasa.gov/content/black-holes-have-simple-feeding-habits/">Black Holes feeding</a>
    <br>
    <a href="https://www.nasa.gov/jpl/nustar/tale-of-two-black-holes/">Two Black Holes</a>
    </br>
  </div>

  <div id="image">
    <img src="binary.jpg" alt="Binary" style="width:226px;height:170px;">
  </div>

  <p>
    Lorem Ipsum text
  </p>
</div>

Answer 1

将段落标记和内容

Lorem Ipsum 文本

放在图像之前和图像 css 中。添加 clear:both。希望这就是您正在寻找的那个 for.if 不要让我知道。

将图片放在 div 下

Position image under div

html

css

css-float