html - 如果太大，调整大小的图像会自动覆盖其下方的文本

Question

我的页面上有三样东西:左侧的菜单、旁边的图片(当我更改浏览器窗口时会自动调整大小)和图片下方的文章。

问题是随着图像变大，文章不会向下移动。

#about-wrapper{
    white-space:nowrap;
    margin-top:10px;
}

#box{
    border:1px solid #ba3e45;
    padding:10px;
    display:inline-block;
    margin:0 1vw 0 5vw;
    min-width:200px;
}

#content{
    display:inline-block;
}

.article-img{
    position:absolute;
    top:10px;
    width:75vw;
    height:auto;
  border: 1px solid black;
}

<div id="about-wrapper">
        <div id="box">
          <h3 class="sub-menu">Menu 1</h3>
          <h3 class="sub-menu">Menu 2</h3>
          <h3 class="sub-menu">Menu 3</h3>
          <h3 class="sub-menu">Menu 4</h3>
        </div>
        <div id="content">
            <div id="image-wrapper">
                <img src="http://pixabay.com/get/9f1d9379e3114f892371/1428329132/banner-48962_1280.png?direct" class="article-img" width="500px" height="200px" alt=""/>
            </div>
            <div id="article">
                <article><p>Lorem ipsum etc</p>
                </article>
            </div>
        </div>
     </div>

我怎样才能改变它，让它看起来像现在一样，但如果图像变大，文章会向下移动？

Answer 1

根据您的评论，这将得到它，以便图像下方的框不会被图像隐藏。

#about-wrapper{
  white-space:nowrap;
  margin-top:10px;
}

#box{
  border:1px solid #ba3e45;
  padding:10px;
  display:inline-block;
  vertical-align: top;
    margin:0 1vw 0 5vw;
    min-width:200px;
}

#content{
    display:inline-block;
    vertical-align: top;
}

.article-img{
  top:10px;
  min-width: 100%;
  height:auto;
  border: 1px solid black;
}

但是，如果您想要这样的布局，您可能需要查看其他选项:

[ #box width:200px ] [ #content width: always take up rest of page ]

一旦你有了它，你就可以弄乱图像容器和那里的东西，你最初实现的主要问题是绝对定位。