【问题标题】：How to float two images side by side without changing their height and width?如何在不改变高度和宽度的情况下并排浮动两个图像？
【发布时间】：2019-06-07 14:25:27
【问题描述】：

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

第一张图片为 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 类的图片，前者的高度只有一半。当我制作eurovan 的图片width: 65% 和boat 的width: 35% 时，它会改变高度，boat 不像原来那样是eurovan 高度的一半。

【问题讨论】：

标签： html css css-float

【解决方案1】：

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

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

501px + 1050px = 1551px

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

1551 像素 * 3% = 46.53 像素

将该值添加到总宽度：

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>

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

同样的策略可以用于其他布局，例如 flexbox 或 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>

【讨论】：

【解决方案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;
}

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

【讨论】：

虽然这可能是个好建议，但它不会按照 OP 的要求将第二张图像的高度保持在第一张图像高度的一半。
实际上，我认为确实如此。他所要做的就是在第二分区创建另一个网格。但他宁愿使用grid-template-rows而不是grid-template-columns
它创建了两列等宽的列，不会按比例缩放图像。 Example here.
如果你想让图像的宽度不均匀，那么你只需要改变比例。看看这个jsfiddle.net/Limiless/xj4c8tv6
我认为这是正确的想法，但第二张图片的高度仍然不是第一张的一半，这似乎是 OP 问题的症结所在。

【解决方案3】：

通过这段代码你可以得到你想要的东西，我制作了一个功能容器并使用背景图像而不是 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;
}

【讨论】：

【解决方案4】：

---------

编辑：我认为我的回答还可以，但是这个https://stackoverflow.com/a/56487541/10712525（@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>

考虑：

我在 feature、left 和 right 类中添加的 padding/margin 属性只是为了让元素保持更远的距离。这不是您的目的所必需的，但风格化的想法是让一切变得美丽，并让项目彼此分开让一切看起来更好。主 div 也一样，你可以根据需要删除它，或者将宽度从 70% 更改为 80% 或 50%。

【讨论】：