Question

我正在创建一个网页，只要另一个div有内容，我就需要两个文本框彼此相邻，然后主文本将占据整个空间的宽度。

但是，由于文本可以很好地缩放，因此任何图像都不会，也不会到达小div的底部，在主文本和图像之间留有巨大的空白。

是否有一种简单的方法可以强制将图像缩放到内部div的侧面，或者我是否需要其他解决方案？

先谢谢您！：）

.container {
 width: 600px;
}

.long-text {
  overflow: hidden;
  width: 100%;
  background: white;
}

.long-text p {}

.long-text img {
  width: auto;
  max-height: 400px;
}

.right-column {
  width: 200px;
  float: right;
  background: green;
  padding: 5px 0 0 18px;
}

<div class="container">
  <div class="long-text">
    <div class="right-column">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <img src="https://placeimg.com/640/480/any">
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
    </p>
    <p>
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>

JS混蛋： https://jsfiddle.net/marginaalivirhe/d8yLko24/8/

Answer 1

您还可以为每个分辨率进行布局。

在CSS https://www.w3schools.com/css/css3_mediaqueries.asp中使用@media

Answer 2

您在寻找这个结果吗？

.container {
 width: 600px;
 display:flex
}

.long-text {
  flex-grow:1;
  background: white;
}



.long-text img {
  max-height: 400px;
}

.right-column {
  width: 200px;
  flex-shrink:0;
  background: green;
  padding: 5px 0 0 18px;
}

<div class="container">
  <div class="long-text">
    
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <img src="https://placeimg.com/640/480/any">
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
    </p>
    <p>
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="right-column">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
</div>

使div内的div旁边的图像缩放

2 个答案: