如何在不更改其高度和寬度的情況下並排浮動兩個圖像？

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類的圖片，而前者是高度的一半。 當我將eurovan的圖片的width: 65% eurovan width: 65% ，將boat的width: 65% eurovan width: 35%它會更改高度，並且boat距不是原來的eurovan高度的一半。

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> 

您的模型不包含第二個圖像和feature元素之間的任何空間。 但是，如果需要，可以在要素元素上添加3％的頁margin-top ，以實現與圖像之間的間距相同大小的垂直間距。 這是基於這樣的事實，即百分比容限是根據包含塊的寬度來計算的 。

---

同樣的策略也可以用於其他布局，例如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> 

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

通過此代碼，您可以找到所需的內容，我制作了一個功能容器，並使用背景圖像而非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

---------

編輯：我認為我的答案是可以的，但是這個https://stackoverflow.com/a/56487541/10712525（@showdev答案）是完美的。

---------

看結果

我添加了新的“ 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屬性僅是為了使元素之間保持更遠的距離。 不一定要達到您的目的，但是樣式化的想法是使所有內容都變得美麗，並使項目彼此分開，使一切看起來更好。 與main div相同，您可以根據需要將其刪除，也可以將寬度從70％更改為80％或50％。