向右浮动不适用于最小宽度

Question

我正在尝试将图像向右对齐，将文本向左对齐。它可以工作，但对最小宽度没有响应。

https://jsfiddle.net/Lnn2yg5k/5/

请注意，如果我将图像/div 放在左侧而不是 min-width 起作用并将文本保持在一起。我在这两种情况下都使用相同的代码：左右浮动。

<h2>Image on the left</h2>
<div class="leftImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textRight">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                   interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>
<h2> Image to the right</h2>
<div class="rightImage">
  <div class="image"></div>
</div>
<div id="wrap">
  <div class="textLeft">
     <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum purus a diam congue, facilisis                 interdum nunc dictum. In quis felis non libero dignissim hendrerit. Curabitur at iaculis massa. </p>
  </div>
</div>

CSS

.image{
  width:300px;
  height:500px;
  background-color: blue;
}
.leftImage{
  margin-top: 20px;
  float:left;
  width:300px;
  height: 500px;
}
.rightImage{
  margin-top: 20px;
  float:right;
  width:300px;
  height: 500px;
  margin-left: 20px;
}
.textRight{
  background-color: blanchedalmond;
  height:150px;
  padding: 80px;
  padding-top: 60px;
  padding-bottom: 120px; 
  margin-left: 250px; 
}
.textLeft{
  background-color: blanchedalmond;
  height:150px;
  padding: 80px;
  padding-top: 60px;
  padding-bottom: 120px;
  margin-right: 250px; 
}
#wrap{
  margin-top: 160px;
  margin-bottom: 100px;
  width: 100%;
  min-height: 200px;
  min-width: 900px;
}

知道如何为右侧的 div 修复它吗？

提前致谢

Answer 1

如果您想要响应式 img 宽度，请使用 ma​​x-width:900px 和 width:100% 这里唯一的问题是你使用的是 min-width 所以它不能小于 900px;

HTML - 是一样的

        <h2>
          Imageto the right
        </h2>

        <div id="wrap">
          <div class="rightImage">
              <div class="image"></div>
          </div>
          <div class="textLeft">
            <p>Loremmm ipsum dolor sit amet, consectetur adipiscing elit. 
             Nullam rutrum purus a diam congue, facilisis interdum nunc 
             dictum. In quis felis non libero dignissim hendrerit. Curabitur 
             at iaculis massa. 
            </p>
          </div>
        </div>

CSS - 更改在 #wrap max-width:900px;

/* Carta/Menu */
 .image{
  width:300px;
  height:500px;
  background-color: blue;
}
 /*.leftImage{
    margin-top: 20px;
    float:left;
    width:300px;
    height: 500px;
} */
.rightImage{
    margin-top: 20px;
    float:right;
    width:300px;
    height: 500px;
    margin-left: 20px;
}
.textRight{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px; 
    margin-left: 250px; 
}
.textLeft{
    background-color: blanchedalmond;
    height:150px;
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 120px;
    margin-right: 250px; 

}
#wrap{
    margin-top: 160px;
    margin-bottom: 100px;
    width: 100%;
    min-height: 200px;
    max-width: 900px;
}