个人中心
gpt4 book ai didi

html - div 中两个图像右侧的无法解释的空白区域。如何删除

转载 作者：行者123 更新时间：2023-12-01 11:11:41 24 4
gpt4 key购买 nike

How the page should look页面布局应该如何^

Image showing white space

如屏幕截图所示，此 html 代码中的两个图像在页面右侧形成了一个空白区域。没有填充，图像本身也没有超出它明显超出的范围 - 是什么导致了这个不必要的空白区域，我该如何删除它？

下面的 CSS:

.Text {
    color: #bd8729;
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: serif, sans-serif;
    background-color: #F7F6F6;
}

/** {*/
    /*background: #000 !important;*/
    /*color: #0f0 !important;*/
    /*outline: solid #f00 1px !important;*/
/*}*/

.topnav {
    overflow: hidden;

}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;

    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.leftSide {
    position: relative;
    float: left;
    width: 55%;

}

.leftPicture1 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    float: left;
    width: 45%;
    max-width: 100%;
    height: auto;
    display: block;

}

.leftPicture2 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    float: right;
    width: 45%;
    max-width: 100%;
    height: auto;
    display: block;
}

.rightSide {
    position: relative;
    float: right;
    width: 45%;

}



.form {
    border-radius: 5px;
    position: relative;
    float: left;
    background-color: #F7F6F6;
    width: 50%;
    padding: 20px;
    height: 120%;
    border: 20px black;

}
.insideForm {
    background-color: white;

    border: black 5px;
}


input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: white;
    color: #111011;
    padding: 12px 20px;
    border: #bd8729;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #bd8729;
}


.rightPicture1 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    width: 80%;
    margin-right: 0px;
    max-width: 100%;
    height: auto;

}

.rightPicture2 {
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
    width: 80%;
    max-width: 100%;
    height: auto;
}


.centerDiv {
    position: relative;
    text-align: center ;

}

.footer {
    width: 100%;
    height: 100px;
    background-color: #303233;
    z-index: 10;
    margin-top: 1000px;
    position: relative;
    clear: both;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</head>
<body>

<div class="topnav" id="myTopnav">
    <img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
    <img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>


<div class="leftSide">
    <div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
        Resort </h2></div>

    <img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
    <div class="centerDiv">
        <p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
            of year
            destination, pairing excellent golf and attractive resort experiences.
        </p>
    </div>
    <p class="Text">
    <ul style="list-style-position: inside">
        <li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
        <li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
        <li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
        <li> Variety of package options available, including other Algarve golf courses</li>
        <li> Only 45 minutes from Faro airport</li>
    </ul>
    </p>

    <div class="leftPicture1">
        <img src="img.jpeg" width="95%">
    </div>
    <div class="leftPicture2">
        <img src="img3.jpg" width="95%">
    </div>

</div>

<div class="rightSide Text">

    <div class="form">
        <div class="insideForm">
            <form action="/action_page.php">
                <div class="centerDiv"><h2> Find out more today </h2></div>
                <hr>
                <p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
                </p>
                <input type="text" id="name" name="firstname" placeholder="Name">
                <input id="email" name="email" placeholder="Email">
                <input type="text" id="phone" name="phone" placeholder="Phone">
                <input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
                agree to the terms of the Monte Rei Data Policy<br>
                <input type="submit" value="SEND">

            </form>
        </div>
    </div>

    <div class="rightPicture1">
        <img src="Swimming%20pool.jpg" width="95%">
    </div>
    <div class="rightPicture2">
        <img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
    </div>
</div>


<div class="footer">
    <img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
    <img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>

这里有什么我遗漏的吗？我以前遇到过这个问题，但无法解决。

编辑:显示超大图像的新屏幕截图 Image with inline styling removed

最佳答案

你试过吗

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

您似乎正在为盒子模型尺寸而苦苦挣扎 https://www.w3schools.com/css/css3_box-sizing.asp

关于html - div 中两个图像右侧的无法解释的空白区域。如何删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59644590/

24 4 0
文章推荐： django - Django url 的优先级
文章推荐： java - Android ActionBar 带有自定义图标？
文章推荐： java - 如何在 Android Studio 中静默地将事件添加到日历中？
文章推荐： java - 数组的最小值始终等于零
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com