如何在不改变高度和宽度的情况下并排浮动两个图像？

Question

对于一个学校项目，我正在尝试重新创建这个：

第一张图片为501x850，第二张图片为1050x425。

HTML

  <section class="clearfix">
    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </section>

CSS

.button {
  background-color: #16D6D1;
  padding: .9rem 2rem;
  border-radius: 6px;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
  size: 1.9rem;
  font-weight: 700;
}

.eurovan {
  width: 35%;
}

.boat {
  width: 65%;
  float: right;
}

.feature {
  width: 65%;
  background-color: #F6F8FA;
  float: right;
}

我需要重新创建的设计有 boat 和 eurovan 的 class 的图片，前者是高度的一半。当我制作 eurovan 的图片 width: 65% 和 boat 的 width: 35% 时，它改变了高度并且 boat 不是 [=13= 高度的一半] 原样。

Answer 1

除非您按比例缩放两个图像的宽度，否则它们的高度也不会按比例缩放。但是，您可以计算出适当的百分比：

两张原生图片的总宽度为：

501px + 1050px = 1551px

要在图像之间添加 3% 的间隙，计算总宽度的 3%：

1551px * 3% = 46.53px

将该值添加到总宽度中：

1551px + 46.53px = 1597.53px

计算每个图像占该总宽度的百分比：

501px / 1597.53px= ~31.36%
1050px / 1597.53px= ~65.73%

如果您使用这些百分比，图像将彼此成比例缩放。

body {
  margin: 0;
}

.eurovan {
  width: 31.36%;
  float: left;
}

.boat {
  width: 65.73%;
  float: right;
}

.feature {
  width: 65.73%;
  background-color: #F6F8FA;
  float: right;
  padding: 1.5em;
  /* margin: 3% 0 0; */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  text-align: center;
}

.feature h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
}

.feature h2 {
  font-size: 1.3em;
  margin: 0 0 1.2em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}

<section class="clearfix">
  <img class="eurovan" src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  <img class="boat" src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
  <div class="feature">
    <h3>Feature</h3>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
    <a href="#" class="button">Read More</a>
  </div>
</section>

您的模型在第二张图片和特征元素之间不包含任何 space。但是如果你想要一个，你可以向特征元素添加 3% margin-top 以获得与图像之间的间隙相同大小的垂直间隙。这是基于百分比保证金是根据 the width of the containing block.

计算得出的事实

同样的策略可用于其他布局，如 flexbox or grid。这可能更容易使特征的底部与第一张图像的底部对齐（取决于特征内容的数量）。

这是一个演示：

body {
  margin: 0;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#col1 {
  flex: 0 0 31.36%;
}

#col2 {
  flex: 0 0 65.73%;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  width: 100%;
}

.feature {
  flex: 1 0 auto;
  background-color: #F6F8FA;
  padding: 1.5em;
  /*margin-top: 4.56%;*/
  /* this is (3% / 65.73%) */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  text-align:center;
}

.feature h3 {
  margin: 0;
  font-size: 1.2em;
}

.feature h2 {
  margin:0;
  font-size: 1.3em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
  font-weight:bold;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}

<section>
  <div id="col1">
    <img src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  </div>
  <div id="col2">
    <img src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </div>
</section>

Answer 2

我建议将您想要影响的两个元素与父元素 div 包裹起来。

<div class="parent_div">
<img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
<img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
</div>

现在您应该使用 flexbox 或 CSS 网格系统，因为建议用它代替浮动。在这种情况下我会推荐网格。

.parent_div{
 display: grid;
 grid-template-columns: 1fr 1fr;
}

您可以查看网格文档以查看您拥有的其他选项。

Answer 3

使用此代码，您可以获得所需的内容，我制作了一个功能容器并使用 background-images 而不是 imgs 以获得更多 css 控制

<section class="clearfix">
    <div class="eurovan"></div>
    <div class="feature-container">
        <div class="boat"></div>
        <div class="feature">
            <h3>Feature</h3>
            <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
            <a href="#" class="button">Read More</a>
        </div>
    </div>
</section>

还有这个CSS

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.button {
    background-color: #16D6D1;
    padding: .9rem 2rem;
    border-radius: 6px;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    size: 1.9rem;
    font-weight: 700;
}

.eurovan {
    width: 33%;
    margin-right: 2%;
    height: 850px;
    float: left;
    background-image: url('../images/eurovan.jpg');
    background-size: cover;
    display: block;
}

.feature-container {
    width: 65%;
    float: left;
    height: 850px;
}

.boat {
    width: 100%;
    height: 50%;
    background-image: url('../images/boat.jpg');
    background-size: cover;
    display: block;
}

.feature {
    width: 100%;
    height: 50%;
    text-align: center;
    background-color: lightgrey;
}

Answer 4

----------

编辑：我认为我的回答没问题，但是这个（@showdev 回答）非常完美。

----------

Look the result

我添加了新的 "main" 元素以将所有内容居中，并用 div 分隔左右内容。我更改了样式中的一些内容，添加了新行并删除了其他内容，所有内容均已发表评论。希望对你有帮助。

代码如下：

<html>
    <head>
        <style>
            .button {
                background-color: #16D6D1;
                padding: .9rem 2rem;
                border-radius: 6px;
                display: inline-block; /* New line */
            }

            a {
                text-decoration: none;
                text-transform: uppercase;
                color: inherit;
                size: 1.9rem;
                font-weight: 700;
            }

            .eurovan {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 35% */
            }

            .boat {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 65% */
                /* delete float: right, dont need it*/
            }

            .feature {
                width: 65%;
                /* delete background-color: #F6F8FA, dont need it */
                /* delete float: right, dont need it */

                text-align: center; /* New line */
                margin: auto; /* New line */
                padding: 50px; /* New line */
            }

            /* add content to this class */
            .left {
                display: inline-block;
                position: absolute;
                width: 65%;
                margin: 20px;
            }

            /* add content to this class */
            .right {
                display: inline-block;
                width: 35%;
                margin: 20px;
            }

            /* add content to this class */
            .clearfix {
                position: relative;
            }

            /* New class, only for center the content in the middle */
            .main {
                max-width: 70%; 
                margin: 0 auto;
            }
        </style>
    </head>
    <body>

        <!-- New main div -->
        <main class="main">

            <section class="clearfix">

                <!-- separate right left content in divs -->
                <div class="right">
                    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
                </div>
                <div class="left">
                    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
                    <div class="feature">
                        <h3>Feature</h3>
                        <h2>lorem ipsum dolor sit amet, consectetur</h2>
                        <a href="#" class="button">Read More</a>
                    </div>
                </div>

            </section>
        </main>
    </body>
</html>

考虑：

我在功能中添加的 padding/margin 属性，左和右 class 只是为了让元素更远。这对你的目的来说不是必需的，但风格化的想法是让一切变得美丽，让项目彼此分开让一切看起来更好。与 main div 相同，您可以根据需要删除它，或者将宽度从 70% 更改为 80% 或 50%。

如何在不改变高度和宽度的情况下并排浮动两个图像？

How to float two images side by side without changing their height and width?

html

css

css-float

----------

----------