html - 调整窗口大小时div消失

Question

我是 html/css 的新手。我正在尝试使用 Google Optimize 进行 A/B 测试，更改页面的 HTML 和 CSS，但当我调整窗口大小时我的主要部分消失了。

我看过其他类似的主题，但找不到任何解决方案。

这是消失部分的 HTML 代码:

    <div id="lp_fullwidth_banner" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid mobile-hide vc_custom_1526308007661 vc_row-no-padding vc_row-o-content-middle vc_row-flex" style="position: relative; box-sizing: border-box; width: 1730px; left: -295px; height: 452.2px !important;"><div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs" style=""><div class="vc_column-inner " style=""><div class="wpb_wrapper" style="">
    <div class="wpb_raw_code wpb_content_element wpb_raw_html" style="">
        <div class="wpb_wrapper" style="">
            <div class="banner-title" style="">
<h1 style="">
Bien acheter à <span id="lp_ville" style="">Paris</span>, c'est vraiment simple !<br>
<span style="">Expert de votre marché local et s’appuyant sur les meilleures technologies, <strong>Mon&nbsp;Chasseur&nbsp;Immo</strong> cherche et trouve pour vous le bien idéal.</span>
</h1>
</div><div style="">
  <span style="">Nos chasseurs immobiliers cherchent et négocient pour vous le meilleur bien au meilleur prix</span>

  <div class="vc_empty_space" style="height: 32px;"><span class="vc_empty_space_inner"></span></div>

            <ul class="fa-ul">
  <li style=""><span class="fa-li" style=""><i class="fa fa-check-square-o"></i></span> Un chasseur immobilier dédié, rémunéré au succès</li>
  <li style=""><span class="fa-li"><i class="fa fa-clock-o"></i></span> Divisez par 10 votre temps de recherche</li>
  <li style=""><span class="fa-li"><i class="fa fa-eur"></i></span> 6% d'économie en moyenne sur votre budget</li>
</ul>
</div>
        </div>
    </div>
</div></div></div></div>

这是页面的 CSS:

div.page-special > div > div:nth-of-type(2) {
  left : -250px !important;
}

div.page-special > div > div:nth-of-type(3) {
  width : 40% !important;
  float : right !important;
}

div.banner-title > h1 {
  width : 683px;
}

div.wpb_raw_code > div > div:nth-of-type(1) {
  width : 683px;
}

div.wpb_raw_code > div > div:nth-of-type(2) {
  background-color : rgba(0, 0, 0, 0.55);
  color : rgb(255, 255, 255);
}

div.page-special > div > div:nth-of-type(8) {
  display : none;
}

div.page-special > div > div:nth-of-type(9) > div > div > div {
  display : none;
}

div.vc_custom_1513333530435 {
  display : none;
}

div.page-special > div > div:nth-of-type(7) > div > div > div > div > div:nth-of-type(2) {
  display : none;
}

div.vc_custom_1513270690175 > div > div:nth-of-type(2) > div > p {
  display : none;
}

div.page-special > div > div:nth-of-type(11) {
  display : none;
}

div.page-special > div > div:nth-of-type(13) {
  display : none;
}

div.vc_custom_1526384528576 > div {
  background-color : rgb(255, 255, 255);
  text-align : center;
}

div.vc_custom_1526384528576 > div > div > div:nth-of-type(1) > h2, div.vc_custom_1526384528576 > div > div > div:nth-of-type(1) {
  text-align : center !important;
}

div.vc_custom_1526384424755 {
  background-color : rgba(229, 229, 229, 0.34) !important;
}

div.page-special > div > div:nth-of-type(19) {
  display : none;
}

div.page-special > div > div:nth-of-type(20) > div > div > div {
  display : none;
}

div.wpb_raw_code > div > div:nth-of-type(2) {
  font-size : 18px;
  padding : 20px;
  margin : 20px;
}

div.page-special > div > div:nth-of-type(3) > div > div:nth-of-type(1) {
  background-color : rgb(242, 242, 242);
}

div.page-special > div > div:nth-of-type(3) > div > div:nth-of-type(1) > div {
  font-size : 17px;
  color : rgb(0, 56, 94);
  width : 339px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) > div {
  font-size : 18px;
  color : rgb(255, 255, 255);
  height : 60px;
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) {
  width : 564px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  width : 564px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) > div {
  padding : 15px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) > div {
  padding : 15px;
  height : 60px;
  font-size : 18px;
  color : rgb(255, 255, 255);
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  height : 380px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) > div {
  height : 60px;
  font-size : 18px;
  color : rgb(255, 255, 255);
  padding : 15px;
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > div {
  padding : 15px;
  height : 60px;
  font-size : 18px;
  background-color : rgba(0, 0, 0, 0.61);
  color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

#lp_fullwidth_banner {
  float : left;
  height : 452.2px;
  background-size : cover;
  width : 60% !important;
  left : 0px !important;
}

div.page-special > div > div:nth-of-type(2) {
  background-repeat : no-repeat no-repeat !important;
}

div.header-menu-inner > div:nth-of-type(2) > p > span {
  font-size : 24px;
}

div.header-top {
  display : none;
}

div.header-menu-inner > div:nth-of-type(2) > p {
  text-align : center;
}

div.page-special > div > div:nth-of-type(3) {
  background-color : rgb(242, 242, 242);
}

知道为什么在调整窗口大小时这个 div 会消失吗？

非常感谢您的帮助

Answer 1

您为您的容器定义了一个以像素为单位的硬宽度值，因此它会一直保持这种状态。如果你想将大小链接到窗口的大小，你可以使用百分比。检查并运行下一个代码片段，我注释掉了一些对您提供的没有帮助或无效的 css 属性:

        div.page-special>div>div:nth-of-type(2) {
            left: -250px !important;
        }

        div.page-special>div>div:nth-of-type(3) {
            width: 40% !important;
            float: right !important;
        }

        /* div.banner-title {
            width: 683px;
        } */

        div.wpb_raw_code {
            /* width: 683px; */
            width: 50%;
        }

        div.wpb_raw_code>div>div:nth-of-type(2) {
            background-color: rgba(0, 0, 0, 0.55);
            color: rgb(255, 255, 255);
        }

        div.page-special>div>div:nth-of-type(8) {
            display: none;
        }

        div.page-special>div>div:nth-of-type(9)>div>div>div {
            display: none;
        }

        div.vc_custom_1513333530435 {
            display: none;
        }

    <div id="lp_fullwidth_banner" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true"
        class="vc_row wpb_row vc_row-fluid mobile-hide vc_custom_1526308007661 vc_row-no-padding vc_row-o-content-middle vc_row-flex"
        >
        <div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs" style="">
            <div class="vc_column-inner " style="">
                <div class="wpb_wrapper" style="">
                    <div class="wpb_raw_code wpb_content_element wpb_raw_html" style="">
                        <div class="wpb_wrapper" style="">
                            <div class="banner-title" style="">
                                <h1 style="">
                                    Bien acheter à <span id="lp_ville" style="">Paris</span>, c'est vraiment simple !<br>
                                    <span style="">Expert de votre marché local et s’appuyant sur les meilleures
                                        technologies, <strong>Mon&nbsp;Chasseur&nbsp;Immo</strong> cherche et trouve
                                        pour vous le bien idéal.</span>
                                </h1>
                            </div>
                            <div style="">
                                <span style="">Nos chasseurs immobiliers cherchent et négocient pour vous le meilleur
                                    bien au meilleur prix</span>

                                <div class="vc_empty_space" style="height: 32px;"><span class="vc_empty_space_inner"></span></div>

                                <ul class="fa-ul">
                                    <li style=""><span class="fa-li" style=""><i class="fa fa-check-square-o"></i></span>
                                        Un chasseur immobilier dédié, rémunéré au succès</li>
                                    <li style=""><span class="fa-li"><i class="fa fa-clock-o"></i></span> Divisez par
                                        10 votre temps de recherche</li>
                                    <li style=""><span class="fa-li"><i class="fa fa-eur"></i></span> 6% d'économie en
                                        moyenne sur votre budget</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>