Question

我的页面上有三样东西：左边的菜单，旁边的图片，当我更改浏览器窗口时自动调整大小，图片下面有文章。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何更改它以使其保持现状，但如果图像变大，文章会向下移动？

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：总是占用页面的其余部分]

一旦你有了这个，你可以搞乱图像容器和那里的东西，你的原始实现的主要问题是绝对定位。

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

1 个答案: