CSS-在圖像旁邊顯示文本（自適應）

Question

我試圖得到一個容器，其中兩個div彼此相鄰，在一個div中有一個圖像，在另一個div中有文本。

這是我當前的CSS和HTML代碼...但是，當我調整窗口大小以在Web應用程序上查看它時，文本將移動到圖像的頂部，我如何使其具有響應性，以便當用戶在其移動設備上查看該圖像時在頂部，文本在下面：

顯示CSS：

 .container{
        width: 100%;
    }
    .centerDiv
    {
        width: 60%;
        margin: 0 auto;
    }
    .div1
    {
        width: 45%;
        float:left;
    }
    .div2
    {
        width: 55%;
        background-color: white;
        float:left;
    }

HTML：

<div class="container">
        <div class="centerDiv">
            <div class="div1">                
                    <img src="..." alt="..."/>
                </div>
                <div class="div2">
                    <br/>                      
                    <h6><b>LOOK AFTER ME</b></h6>
                    <h6>100% Cotton <br/>
                      <br/></h6>
                    <h6><b>STYLE GUIDE</b></h6>
                    <h6>This Tee looks just right paired<br/> with joggers, jeans or shorts. <br/>
                    </h6> <br/>

            </div>
        </div>
    </div>

請幫忙 ：（

試圖實現：

Answer 1

我會用浮點數。 並使圖像成為HTML中背景的一部分。

<div class="item_description">
  <div class="image"
        style="background-image:url('https://ae01.alicdn.com/kf/HTB13zAXIFXXXXbxXFXXq6xXFXXX7/New-Arrival-2014-Mens-Flared-Jeans-Men-s-Bell-Bottom-Denim-Male-Big-Horn-Jean-Flare.jpg');">
  </div>
  <div class="desc">
   Description here
  </div>
</div>

然后，您可以在CSS中執行以下操作：

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
.item_description {
  width:100%;
}
.image {
  height:0;
  padding-bottom:40%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  position:relative;
  width:40%;
}
.desc, .image {
  float:left;
  display:block
}
.desc {
  width:60%;
  text-align:center;
  padding:20px;
}
@media (max-width:600px) {
  .desc, .image {
    float:none;
    width:100%;
  }
}

要點：

• box-sizing:border-box在響應式設計box-sizing:border-box非常重要。 它計算填充為總寬度的一部分。 您可以在某處在線閱讀有關該內容的更多信息。

• 媒體查詢使您可以控制在滿足特定屏幕尺寸時CSS會發生什么情況。 我添加了一個，以便圖像和描述在600px或更小處彼此堆疊。

看到這個jsFiddle

https://jsfiddle.net/xnfc8vsx/3/

我希望這有幫助 ：-）

Answer 2

您需要給centerDiv一個寬度，以便他的孩子可以調整。

我希望這有幫助。 如果沒有，請添加評論，以便我編輯答案。

 .container { width: 100vw; } .centerDiv { width: 60vw; margin: 0 auto; } .div1 { width: 45%; float: left; } .div2 { width: 55%; background-color: white; float: left; } img { width:100%; height: auto; } 

 <div class="container"> <div class="centerDiv"> <div class="div1"> <img src="http://via.placeholder.com/500x500" alt="..." /> </div> <div class="div2"> <br/> <h6><b>LOOK AFTER ME</b></h6> <h6>100% Cotton <br/> <br/></h6> <h6><b>STYLE GUIDE</b></h6> <h6>This Tee looks just right paired<br/> with joggers, jeans or shorts. <br/> </h6> <br/> </div> </div> </div> Run 

Answer 3

為了獲得更好，更輕松和跨瀏覽器的負責任設計，您必須檢查一下-您只需要添加已經定義的對應類：您還可以在互聯網上獲得許多教程，這是最著名的CSS庫之一。
引導程序