时间戳

首页 > 解决方案 > 在 div 中放置一张照片，将其父亲的其余部分

html - 在 div 中放置一张照片，将其父亲的其余部分

问题描述

我想要这样的东西：

**************************************************************************
*                                                              *   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>

标签： htmlcss

解决方案

我做了它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>

推荐阅读