0

我想要这样的东西：

**************************************************************************
*                                                              *   div2  *
*                                                              *         *
*                                                              ***********
*                                                              *   div3  *
*                             div1                             * (image) *
*                                                              *         *
*                                                              *         *
*                                                              *         *
*                                                              *         *
*                                                              *         *
**************************************************************************

div1左侧有内容，其高度随内容高度调整。div2包含一些文本，并且只有div3一个图像。我想要的总高度div2和div3等于的高度div1但是当我把照片放进去时，它会离开框架。在问题的标题中，我已经说过取其父亲身高的剩余部分，但紧随其后放置（如以下代码）或它们的高度比为 20 到 80 div3并不重要。div3div2

.container {
   width: 100%
 }

 .left-side {
   width: 80%;
   background-color: red;
   float: left;
 }

 .right-side {
   text-align: center;
   width: 20%;
   background-color: blue;
   float: right;
 }

 .top {
   background-color: green;
 }

 .bottom img {
   height: auto;
   width: 100%;
 }
<div class='container'>
  <div class="left-side">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
  </div>
  <div class="right-side">
    <div class="top">
      TOP
    </div>
    <div class="bottom">
      <img  src='https://www.kindpng.com/picc/m/73-736150_ios-arrow-thin-down-small-down-arrow-symbol.png'>
    </div>
  </div>
</div>

4

2 回答 2

0

我做了它flex并删除了所有float

.container {
   display:flex;
   
 }

 .left-side {
   width: 80%;
   background-color: red;
 }

 .right-side {
    display:flex;
   flex-direction:column;
   text-align: center;
   width: 20%;
   background-color: blue;
 }

 .top {
   background-color: green;
 }

 .bottom img {
   height: auto;
   width: 100%;
 }
<div class='container'>
  <div class="left-side">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
  </div>
  <div class="right-side">
    <div class="top">
      TOP
    </div>
    <div class="bottom">
      <img  src='https://www.kindpng.com/picc/m/73-736150_ios-arrow-thin-down-small-down-arrow-symbol.png'>
    </div>
  </div>
</div>

于 2021-08-01T12:17:14.090 回答
0

您可以使用grid并简化 html

img {
  display:block;
  }
  
.container {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: 1fr auto;
 }

 .left-side {
   background-color: red;
   grid-row: span 2;
 }

 .top {
   background-color: green;
 }

 .bottom img {
   width:100%;
 }
<div class='container'>
  <div class="left-side">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
  </div>
  <div class="top">
    TOP
  </div>
  <div class="bottom">
    <img src='https://www.kindpng.com/picc/m/73-736150_ios-arrow-thin-down-small-down-arrow-symbol.png'>
  </div>
</div>

如果您想在 div1 中放置图像，您可以添加角色：

    .left-side img {
      width:100%;
    }

于 2021-08-01T17:41:39.103 回答