1. 首頁
  2. 問答
  3. 清除：在彼此之上堆疊兩個div（在父div內）

清除：在彼此之上堆疊兩個div（在父div內）

2017-02-02 130 views
0

我已經設法實現在彼此頂部爲480px的移動設備堆疊兩個div，使用clear：both（.vd-grid-xtra-box ）。他們在一個父母的div裏面。不幸的是，我試圖將它們都設置爲100％寬度，但它們沒有響應。爲什麼會這樣？清除：在彼此之上堆疊兩個div（在父div內）

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<title>Vivid Shop Display</title> 
<link rel="stylesheet" href='css/vivid-style.css'> 
<link rel='stylesheet' href='css/scroller.css'> 
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
</head> 

<body> 
<header> 
<div class="vd-navigation-wrapper"> 
    <div class="vd-settings-wrapper"> 
     <div class="vd-user-settings"> 
     </div> 
     <div class="vd-currency-selector"> 
     </div> 
     <div class="vd-language-selector"> 
     </div> 
    </div> 
    <div class="vd-nav-wrapper"> 
      <ul> 
       <li>Shop</li> 
       <li>About</li> 
       <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li> 
       <li>Lookbook</li> 
       <li>Contact</li> 
      </ul> 
    </div> 
     <div class="vd-cart-wrapper"> 
     <div class="vd-cart-selector"></div> 
     </div> 

</div> 

<!--Mobile Navigation--> 
    <nav class="vd-hide"> 
    <div class="header-top clearfix"> 
    <a class="nav toggle-menu" href="#"> 
     <i></i> 
     <i></i> 
     <i></i> 
    </a> 
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1> 
    </div> 
    <ul id="menu"> 
     <li data-menuanchor="firstSection"> 
     <a href="#firstSection" title="First Section">First Section</a> 
     </li> 
     <li data-menuanchor="secondSection"> 
     <a href="#secondSection" title="Second Section">Second Section</a> 
     </li> 
     <li data-menuanchor="thirdSection"> 
     <a href="#thirdSection" title="Second Section">Third Section</a> 
     </li> 
     <li data-menuanchor="fourthSection"> 
     <a href="#fourthSection" title="Fourth Section">Fourth Section</a> 
     </li> 
     <li data-menuanchor="fifthSection"> 
     <a href="#fifthSection" title="First Slide">First Slide</a> 
     </li> 
     <li data-menuanchor="fifthSection/1"> 
     <a href="#fifthSection/1" title="Second Slide">Second Slide</a> 
     </li> 
    </ul> 
    </nav> 
    </div> 
</header> 
<!--End Mobile Navigation--> 

<div class="vd-page-container"> 
<div class="vd-grid"> 
    <div class="vd-grid-left-col"> 
    <div class="vd-grid-main-box vd-margin-bottom"> 
    <div class="vd-text-wrap"> 
     <h1>Header Text</h1> 
     <h2>Secondary Title</h2> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
</div> 
    </div> 

    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
    <div class="vd-grid-right-col vd-margin-left"> 
    <div class="vd-grid-xtra-box"> 
     <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
     <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom"> 
    <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
</div> 
</div> 
<div class="clear"></div> 
    <footer class="vd-footer"> 
     <div class="vd-widget-area"> 
     <div class="vd-footer-text"> 
      <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4> 
      <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div> 
     </div> 
      <div class="vd-footer-links"> 
       <h4 class="vd-footer-title">HELP</h4> 
      <ul> 
       <li><a class="" href="#">HELP | FAQ'S</a></li> 
       <li><a class="" href="#">RETURNS</a></li> 
       <li><a class="" href="#">HOW TO SHOP</a></li> 
       <li><a class="" href="#">CONTACT US</a></li> 
       <li><a class="" href="#">STOCKISTS</a></li> 
      </ul> 
      </div> 
     <div class="vd-footer-links"> 
      <h4 class="vd-footer-title">POLICIES</h4> 
      <ul> 
       <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li> 
       <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li> 
       <li><a class="" href="#">PRIVACY POLICY</a></li> 
       <li><a class="" href="#">SECURITY POLICY</a></li> 
      </ul> 
      </div> 
    <div class="vd-footer-links"> 
     <h4 class="vd-footer-title">CONNECT</h4> 
      <ul> 
       <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li> 
       <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li> 
       <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li> 
       <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li> 
      </ul> 
      </div> 
     <div class="vd-signup"> 
      <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4> 
      <div class="wht">HTML Block to be added here for embedded email capture forms</div> 
     </div> 
    </div> 
    <div class="vd-sub-footer"> 
     <ul class="vd-payment-options"> 
      <li class="vd-payment-icon american-express"></li> 
      <li class="vd-payment-icon bitcoin"></li> 
      <li class="vd-payment-icon jcb"></li> 
      <li class="vd-payment-icon master"></li> 
      <li class="vd-payment-icon paypal"></li> 
      <li class="vd-payment-icon visa"></li> 
     </ul> 
    <div class="vd-copyright-wrapper"> 
     <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p> 
     <p class="vd-attribution">"Virtual Visual Merchandising"</p> 
    </div> 
    </div> 
</footer> 
</body> 
</html>

CSS：

@charset "UTF-8"; 

/* CSS Document */ 

/*Vivid Global Styling*/ 

html {} body { 
    margin: 0px; 
    padding: 0px; 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
ul, 
li, 
span { 
    margin: 0px; 
    padding: 0px; 
} 
h1 { 
    margin: 0 0 14px 0; 
} 
h2 { 
    margin: 0 0 10px 0; 
} 
.wht { 
    color: #fff; 
} 
.clear { 
    clear: both; 
} 
/*Vivid Page Settings*/ 

header { 
    width: 100%; 
    background-color: #fff; 
    border-bottom: #000 1px solid; 
} 
.vd-hide { 
    display: none; 
} 
.vd-settings-wrapper { 
    width: 15%; 
    max-width: 200px; 
} 
.vd-user-settings { 
    width: 48px; 
    height: 48px; 
    border: 1px solid #000; 
    background-color: #fff; 
    float: left; 
    margin: 12px 2px 0 21px; 
} 
.vd-currency-selector { 
    width: 58px; 
    height: 21px; 
    border: 1px solid #000; 
    background-color: #fff; 
    float: left; 
    margin: 12px 2px 1px 2px; 
} 
.vd-language-selector { 
    width: 58px; 
    height: 21px; 
    border: 1px solid #000; 
    background-color: #fff; 
    float: left; 
    margin: 3px 2px 0 2px; 
} 
/*Vivid Main Navigation*/ 

.vd-nav-wrapper { 
    width: 75%; 
    height: 78px; 
    margin: 0 auto; 
    text-align: center; 
} 
.vd-nav-wrapper ul { 
    font-family: 'Montserrat', sans-serif; 
    text-align: center; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.vd-nav-wrapper li { 
    text-decoration: none; 
    list-style: none; 
    display: inline-block; 
    margin: 22px 20px; 
    vertical-align: middle; 
} 
.vd-nav-wrapper a { 
    text-decoration: none; 
    list-style: none; 
    display: inline-block; 
    margin: 18px 20px; 
    vertical-align: middle; 
} 
.vd-logo-img { 
    margin: 0px; 
    padding: 0px; 
} 
/*Vivid Checkout Settings*/ 

.vd-cart-wrapper { 
    width: 10%; 
    z-index: 10; 
} 
.vd-cart-selector { 
    width: 48px; 
    height: 48px; 
    border: 1px solid #000; 
    background-color: #fff; 
    margin: -11px 31px 0 2px; 
    position: absolute; 
    top: 23px; 
    right: -9px; 
} 
/*Vivid Main Wrapper*/ 

.vd-page-container { 
    width: 100%; 
    margin: 0 auto; 
} 
/*Vivid Grid*/ 

.vd-grid h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: 'Montserrat', sans-serif; 
    line-height: 32px; 
    color: #fff; 
} 
.vd-grid p, 
span { 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height: 17px; 
    font-size: 0.85em; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
.vd-grid h1 { 
    margin: 0; 
    padding: 0; 
} 
.vd-grid h2 { 
    font-size: 1.2em; 
    margin: 0 0 4px 0; 
} 
.vd-grid h3 { 
    margin: 4px 0 4px 0; 
} 
.vd-grid h4 { 
    margin: 4px 0 4px 0; 
} 
.vd-grid { 
    width: 98.6%; 
    margin: 13px auto; 
} 
.vd-grid-left-col { 
    width: 77.6%; 
    float: left; 
} 
.vd-grid-right-col { 
    width: 20.8%; 
    float: left; 
} 
.vd-grid-main-box { 
    width: 93.5%; 
    height: 460px; 
    background-color: #000029; 
    padding: 3.2%; 
} 
.vd-grid-main-box img { 
    width: 100%; 
    height: auto; 
    position: absolute; 
} 
.vd-grid-sub-box { 
    width: 30.8%; 
    height: 159px; 
    background-image: url(../img/granda_hj.jpg); 
    background-size: cover; 
    background-position: top center; 
    background-color: #000029; 
    float: left; 
    padding: 0.9%; 
    margin: 0 0 1% 0.2%; 
} 
.vd-grid-xtra-box { 
    width: 94%; 
    height: 332px; 
    background-image: url(../img/tst_img.jpg); 
    background-size: cover; 
    background-position: center center; 
    background-color: #000029; 
    padding: 3%; 
} 
.vd-text-wrap { 
    width: 100%; 
    position: relative; 
    top: 340px; 
    left: 0px; 
} 
.vd-margin-top { 
    margin-top: 4%; 
} 
.vd-margin-right { 
    /*! margin-right:10px; */ 
    margin-right: 1%; 
} 
.vd-margin-left { 
    /*! margin-left:10px; */ 
    margin-left: 0.8%; 
} 
.vd-margin-bottom { 
    margin-bottom: 1%; 
} 
/*Vivid Footer*/ 

.vd-footer { 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height: 16px; 
    padding: 0 30px; 
    padding-bottom: 55px; 
    background-color: #000029; 
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
} 
.vd-widget-area { 
    padding: 15px 0 10px; 
    border-top: 0px solid #e5e5e5; 
    max-width: 1260px; 
    margin: 0 auto 0px; 
} 
.vd-footer-text { 
    display: inline-block; 
    vertical-align: top; 
    width: 26%; 
    padding-right: 60px; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-footer-links { 
    display: inline-block; 
    vertical-align: top; 
    padding: 0 30px 25px 0; 
    width: 12%; 
    line-height: 22px; 
    font-size: 12px; 
    color: white; 
} 
.vd-footer-links ul { 
    margin: 0; 
    padding: 0; 
    list-style: outside none; 
    display: block; 
    vertical-align: top; 
} 
.vd-footer-links li { 
    font-size: 12px; 
    color: white; 
    text-decoration: none; 
} 
.vd-footer-links a { 
    font-size: 12px; 
    color: #ccc; 
    text-decoration: none; 
} 
.vd-footer-links a:hover { 
    font-size: 12px; 
    color: white; 
} 
.vd-footer-title { 
    font-family: 'Montserrat', sans-serif; 
} 
.vd-signup { 
    display: inline-block; 
    max-width: 305px; 
    width: 26%; 
    font-size: 12px; 
} 
.vd-sub-footer { 
    border-top: 1px solid #e5e5e5; 
    padding-top: 25px; 
    margin-top: 0px; 
    font-size: 0; 
    max-width: 1260px; 
    margin: 0 auto; 
} 
/*Vivid Payment Icons*/ 

.vd-payment-icon { 
    font-size: 20px; 
    vertical-align: middle; 
    line-height: 1.2; 
    color: #a7a7a7; 
} 
.vd-footer-linklist .vd-social-icon:before { 
    font-size: 16px; 
    width: 16px; 
    text-align: center; 
    margin-right: 5px; 
    font-family: 'Social Icons'; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1; 
    font-weight: normal; 
    font-style: normal; 
    speak: none; 
    text-decoration: inherit; 
    text-transform: none; 
    text-rendering: optimizeLegibility; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-payment-options { 
    float: right; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    text-align: right; 
    font-size: 12px; 
    text-decoration: none; 
    display: block; 
    list-style: outside none; 
} 
.vd-payment-options ul { 
    display: block-inline; 
    list-style-type: outside none; 
} 
.vd-payment-options li { 
    display: block-inline; 
    float: right; 
    padding: 0 0 0 10px; 
    list-style-type: outside none; 
} 
.american-express:before { 
    content: "\f001"; 
} 
.bitcoin:before { 
    content: "\f006"; 
} 
.jcb:before { 
    content: "\f028"; 
} 
.master:before { 
    content: "\f02d"; 
} 
.paypal:before { 
    content: "\f033"; 
} 
.visa:before { 
    content: "\f045"; 
} 
/*Vivid Copyright*/ 

.vd-copyright-wrapper { 
    float: left; 
    margin: 0; 
    width: 50%; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
} 
/*Vivid Responsive*/ 

@media (min--moz-device-pixel-ratio: 1.3), 
(-o-min-device-pixel-ratio: 2.6/2), 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-device-pixel-ratio: 1.3), 
(min-resolution: 1.3dppx) {} 

@media screen and (max-width: 928px) { 
    .vd-grid-left-col { 
    width: 100%; 
    } 
    .vd-grid-right-col { 
    overflow: hidden; 
    width: 100%; 
    margin: 0; 
    clear: both; 
    } 
    .vd-grid-right-col > div { 
    width: 49%; 
    box-sizing: border-box; 
    margin: 0; 
    } 
    .vd-grid-right-col > div:first-child { 
    margin-right:2%; 
    } 
    .vd-grid-xtra-box { 
    float: left; 
    } 
    .vd-footer{ 
    margin-top: 20px; 
    } 
} 

@media screen and (max-width: 480px) { 

    .vd-grid-sub-box { 

     width: 100%; 
    } 

    .vd-grid-xtra-box { 

    clear: both; 
    width: 100% 
    display: block; 


    } 

    .vd-grid-right-col { 

    width: 100% 

    } 
}

來源

2017-02-02 Benjamints

+0

實際上'clear：both'用於去除元素的左右浮動。 –

+0

哦，好的。所以這顯然不是使用的選擇器。我怎麼能讓這兩個div，在父容器內以100％的寬度堆疊在彼此之上？ – Benjamints

回答

0

這是一個CSS具體問題。通過目標這個選擇這些元素在你的媒體查詢

.vd-grid-right-col > div { 
    width: auto; 
    float: none; 
    }

來源

2017-02-02 20:16:24

+0

謝謝你的回覆。你能向我解釋'.vd-grid-right-col> div'是什麼。這與繼承有關嗎？ – Benjamints

+0

@Benjamints沒問題。這針對的是一個div，它是'.vd-grid-right-col'的直接子節點。 '>'被稱爲子組合選擇器https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors –

+0

另外，兩個div之間沒有100％的空間，而我不要以爲我有選擇使用保證金，因爲他們被命名爲相同的類 – Benjamints

0

我不知道是否我可以告訴你想知道的，但我要去嘗試。

第一：我想你錯過了html標籤clear。 第二：clear沒有浮動功能不會做任何事情。 第三：在這個例子中，你甚至沒有使用過浮標既不是.clear

這就是爲什麼它不工作。

現在該怎麼做才能使它工作？ 如果你想讓他們只有一個在頂部，第二個在第一個你只有不告訴他們出現在另一個地方。 （你沒有顯示所有的css，是嗎？）

你也可以使用flex-layout，我更喜歡。 more about flex layout 另一種方法：使用一些CSS只是移動：在CSS的開頭你這樣做：

@media screen and (min-width: 768px) {

和你關閉它「}」 （這是如何只使用了大屏幕的CSS你也可以使用max-width使用的東西只爲手機屏幕。 希望我能幫助

來源

2017-02-02 20:20:45 Asqiir

0

你有沒有打過電話這裏面媒體查詢，如下面？

@media all and (max-width:480px) { 
.vd-grid-xtra-box{ 
    width:100%; 
    float:none; 
    clear:both; 
}  
}

希望這將爲你解決。另外請確保您沒有使用!important代碼屬性以上任何其他css規則中的類。

來源

2017-11-13 10:08:09 paramsheoran

相關問題

 相關問題