Html 如何使两个图像并排浮动而不改变其高度和宽度？_Html_Css_Css Float

Html 如何使两个图像并排浮动而不改变其高度和宽度？

html css

Html 如何使两个图像并排浮动而不改变其高度和宽度？,html,css,css-float,Html,Css,Css Float,对于一个学校项目，我尝试重新创建以下内容：第一张图片是501x850，第二张图片是1050x425 HTML 我需要重新创建的设计有一张图片，上面有boat和eurovan，前者是高度的一半。当我制作eurovan的图片width:65%和boat的width:35%时，它会改变高度，boat的高度并不像原来那样是eurovan的一半。除非你按比例缩放两幅图片的宽度，那么他们的身高也不会成比例地增加。但是，您可以计算适当的百分比：两个本机图像的总宽度为： 501px+1050px=1551

对于一个学校项目，我尝试重新创建以下内容：

第一张图片是501x850，第二张图片是1050x425

HTML

我需要重新创建的设计有一张图片，上面有

boat

和

eurovan

，前者是高度的一半。当我制作

eurovan

的图片

width:65%

和

boat

的

width:35%

时，它会改变高度，

boat

的高度并不像原来那样是

eurovan

的一半。

除非你按比例缩放两幅图片的宽度，那么他们的身高也不会成比例地增加。但是，您可以计算适当的百分比：

两个本机图像的总宽度为：

501px+1050px=1551px

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

1551px*3%=46.53px

将该值添加到总宽度：

1551px+46.53px=1597.53px

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

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

如果使用这些百分比，图像将按比例相互缩放

正文{
保证金：0；
}
欧罗万先生{
宽度：31.36%；
浮动：左；
}
.船{
宽度：65.73%；
浮动：对；
}
.特征{
宽度：65.73%；
背景色：#F6F8FA；
浮动：对；
填充：1.5em；
/*利润率：3%0*/
框大小：边框框；
字体大小：10px；
字体系列：无衬线；
文本对齐：居中；
}
.特征h3{
边缘：0.01米；
字体大小：1.2米；
}
.特征h2{
字体大小：1.3em；
边缘：0.1.2米；
}
.按钮{
背景色：#16D6D1；
填充物：0.9em2em；
边界半径：.5em；
显示：内联块；
}
a{
文字装饰：无；
文本转换：大写；
颜色：继承；
}


特色
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum dolor sit amet）是一位杰出的领袖，他是一位伟大的领袖。

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

两个本机图像的总宽度为：

501px+1050px=1551px

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

1551px*3%=46.53px

将该值添加到总宽度：

1551px+46.53px=1597.53px

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

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

如果使用这些百分比，图像将按比例相互缩放

正文{
保证金：0；
}
欧罗万先生{
宽度：31.36%；
浮动：左；
}
.船{
宽度：65.73%；
浮动：对；
}
.特征{
宽度：65.73%；
背景色：#F6F8FA；
浮动：对；
填充：1.5em；
/*利润率：3%0*/
框大小：边框框；
字体大小：10px；
字体系列：无衬线；
文本对齐：居中；
}
.特征h3{
边缘：0.01米；
字体大小：1.2米；
}
.特征h2{
字体大小：1.3em；
边缘：0.1.2米；
}
.按钮{
背景色：#16D6D1；
填充物：0.9em2em；
边界半径：.5em；
显示：内联块；
}
a{
文字装饰：无；
文本转换：大写；
颜色：继承；
}


特色
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum dolor sit amet）是一位杰出的领袖，他是一位伟大的领袖。

我建议在案例图像中使用父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>

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

我建议在案例图像中使用父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>

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

通过这段代码，您可以获得所需的内容，我制作了一个功能容器，并使用背景图像而不是IMG来实现更多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>

有了这段代码，你可以得到你想要的东西，我制作了一个功能容器，并使用背景图像而不是img来进行更多的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>

--------- EDIT：我认为我的答案是可以的，但这个（@showdev-answer）非常完美。

---------

我在中间添加了一个新的“主”元素，然后用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>


.按钮{
背景色：#16D6D1；
填充：.9rem 2rem；
边界半径：6px；
显示：内联块；/*新行*/
}
a{
文字装饰：无；
文本转换：大写；
颜色：继承；
大小：1.9雷姆；
字号：700；
}
欧罗万先生{
宽度：100%；/*100%宽度，保留它，不要删除或更改为“自动”或35%*/
}
.船{
宽度：100%；/*100%宽度，保留它，不要删除或更改为“自动”或65%*/
/*删除浮动：对，不需要它*/
}
.特征{
宽度：65%；
/*删除背景色：#F6F8FA，不需要它*/
/*删除浮动：对，不需要它*/
文本对齐：居中；/*新行*/
边距：自动；/*新行*/
填充：50px；/*新行*/
}
/*将内容添加到此类*/
.左{
显示：内联块；
位置：绝对位置；
宽度：65%；
利润率：20px；
}
* {
    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;
}

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