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在响应式设计中非常重要。它计算填充作为总宽度的一部分。您可以在某处了解更多有关该在线的信息。
媒体查询允许您控制在满足特定屏幕尺寸时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库之一✌
Bootstrap

CSS - 在图像旁边显示文本（响应）

3 个答案: