1. Zuhause
  2. Frage und Antwort
  3. Clear: beide, um zwei divs übereinander zu stapeln (innerhalb Elternteil)

Clear: beide, um zwei divs übereinander zu stapeln (innerhalb Elternteil)

2017-02-02 5 views
0

Ich habe es geschafft, zwei Divs übereinander für das Handy bei 480px mit clear zu stapeln: beide (.vd-grid-xtra-box). Sie sind in einem Elternteil div. Leider versuche ich, beide auf 100% Breite für das Handy einzustellen, aber sie reagieren nicht. Warum ist das der Fall?Clear: beide, um zwei divs übereinander zu stapeln (innerhalb Elternteil)

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

    } 
}

Quelle

2017-02-02 Benjamints

+0

Eigentlich 'clear: both' wird verwendet, um das linke und rechte Floating eines Elements zu entfernen. –

+0

Oh, okay. Das ist also offensichtlich nicht der zu verwendende Selektor. Wie kann ich diese zwei divs machen, übereinander gestapelt auf 100% Breite innerhalb des übergeordneten Containers? – Benjamints

Antwort

0

Es ist ein CSS Spezifität Problem. Ziel diese Elemente über diese Wähler in Ihrer Medienabfrage

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

Quelle

2017-02-02 20:16:24

+0

Vielen Dank für Ihre Antwort. Kannst du mir erklären was '.vd-grid-right-col> div' ist. Hat es etwas mit Erbschaft zu tun? – Benjamints

+0

@Benjamints kein Problem. Das zielt auf ein div ab, das ein direktes Kind von '.vd-grid-right-col 'ist. Das '>' wird Child-Kombinator-Selektor genannt https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors –

+0

Außerdem gibt es kein Leerzeichen zwischen den beiden Divs bei 100% und I glaube nicht, dass ich eine Option habe, Margin zu verwenden, da sie dieselbe Klasse heißen – Benjamints

0

Ich weiß nicht, ob ich das sagen kann, was Sie wissen wollen, aber ich werde versuchen.

Erstens: Ich glaube, Sie haben das HTML-Tag clear missverstanden. Zweitens: clear macht nichts ohne einen Schwimmer. Drittens: In diesem Beispiel haben Sie noch nicht einmal einen Schwimmer verwendet .clear

Deshalb ist es nicht funktioniert.

Was jetzt zu tun, damit es funktioniert? Wenn du sie nur einmal oben haben willst, dann musst du sie nur an einem anderen Ort erscheinen lassen. (Sie haben nicht alle CSS gezeigt, oder?)

Sie könnten auch ein Flex-Layout verwenden, das ich bevorzuge. more about flex layout Eine andere Möglichkeit: Eine CSS nur für den mobilen Einsatz: am Anfang der CSS Sie dies tun:

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

und Sie schließen es mit „}“ (Das war wie eine CSS für große Bildschirme nur zu verwenden, können. Sie verwenden max-width auch nur für mobile Bildschirme etwas zu verwenden. Hoffnung I

Quelle

2017-02-02 20:20:45 Asqiir

0

Sie es versucht Aufruf wie unten innerhalb Medien Fragen haben helfen könnte?

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

Hoffnung Das wird für dich funktionieren. Stellen Sie außerdem sicher, dass Sie in keiner anderen css-Regel !important code property zur obigen Klasse verwendet haben.

Quelle

2017-11-13 10:08:09 paramsheoran

Verwandte Themen

 Verwandte Themen