1. 首页
  2. 问答
  3. 清除：在彼此之上堆叠两个div（在父div内）

清除：在彼此之上堆叠两个div（在父div内）

2017-02-02 73 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

相关问题

 相关问题