Question

您好我的div中的图片有问题。

.navbar {
  position: fixed;
  z-index: 1000;
  height: 100%;
  width: 60px;
  left: 0px;
  top: 0px;
  background-color: #2e2d2d;
  border-right: 1px solid #c6c5c5;
}
#works {
  position: relative;
  margin-left: 60px;
  height: 100%;
}
.left {
  position: relative;
  width: 50%;
  float: left;
}
.right {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
}
#works .up {
  width: 100%;
  height: 50%;
}
.up h1 {
  font-family: ralewayregular;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 10px;
  padding: 10px 15px;
}
.up h2 {
  font-family: ralewayregular;
  font-size: 5pt;
  padding: 1px 15px;
}
.down_1 {
  float: left;
  width: 50%;
  height: 50%;
}
.down_2 {
  float: left;
  width: 50%;
}

<div class="navbar">
  <a class="menu-trigger"></a>
</div>
<section id="works">
  <div class="all">
    <div class="left">
      <img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%">
    </div>
    <div class="right">

      <div class="up">
        <h1>bl bla</h1>
        <h2>/asdasda <br /> as : VENEZIA 
                    / SELLEKTOR / SUGARPILLS / NIKKI LISSONI</h2>
        <div class="arrow"></div>

      </div>

      <div class="down_1">
        <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" />
      </div>

      <div class="down_2">

        <img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" />
      </div>

    </div>

  </div>
</section>

左边的Div必须和div一样具有相同的高度。两者都应以一行结尾。如何做到这一点，而不是给他们高，不要拉我的图像？ Div上下应该有50％的高度，但它不起作用。

有人可以帮我解决吗？

Answer 1

要使它们达到相同的高度，最多的是一些尺寸，严格的高度或最小高度。

要测量的高度，请执行以下操作：

.left, .right {
width: 100%; /* Adjust as needed */
min-height 50%; /* best to be the same as what you assume would
 be the height of the taller both DIV's so that nothing will be cut off */
}

为了让您的图像不被扭曲，请执行以下操作：

.right img, .right img, {
width: 100%;
height: auto; /* Set the height to auto to give the
 image a breathing space to reduce distortion */
}

如何在一行中设置带有图像的div？

1 个答案: