調整大小後會自動覆蓋下方的文字如果太大

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寬度：200像素] [＃內容寬度：始終佔據頁面的其餘部分]

一旦你有了這些，你可以從圖像容器和東西，從那裏一塌糊塗，主要問題w /你原來的實現是絕對定位。