浮子正确不适合最小宽度

Question

我正在尝试将图像与右侧和左侧的文本对齐。它起作用，但对最小宽度的反应不足。

https://jsfiddle.net/lnn2yg5k/5/

请注意，如果我将图像/div放在左侧，而是将最小宽度可行，并将文本保持在一起。我在两种情况下都使用相同的代码：左右浮动。

<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宽度 max-Width：900px and width：100％这里唯一的问题是您使用的是最小宽度，因此它不能比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;
}