html - 清除 :both to stack two divs on top of eachother (inside parent div)-6ren

html - 清除 :both to stack two divs on top of eachother (inside parent div)

转载作者：行者123 更新时间：2023-11-28 04:25:06

我已经成功地通过使用 clear:both (.vd-grid-xtra-box) 在 480px 的移动设备上将两个 div 堆叠在一起。它们在父 div 中。不幸的是，我试图将它们都设置为移动设备的 100% 宽度，但它们没有响应。为什么会这样？

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

    }
}

最佳答案

这是一个 CSS 特异性问题。在您的媒体查询中通过此选择器定位这些元素

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

关于html - 清除 :both to stack two divs on top of eachother (inside parent div)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42011310/

文章推荐： javascript - angular2 组件生命周期

文章推荐： javascript - 将 ES6 与 gulp 一起使用

文章推荐： html - 字体大小增加上边距

java - 在两个不同的类中调用方法 : Calling eachothers' methods
这个问题在这里已经有了答案: Why am I receiving a stack overflow? (2 个答案) 关闭 4 年前。我有 2 个不同的类，它们都相互调用方法。出于某种原因，当我
HTML/CSS : Have images besides eachother
这是我的问题+代码: http://jsbin.com/oyusa3/edit 如果您可以看到图像之间和图像下方有空格，这是我不想要的。我找不到我指定的地方应该这样做？我该如何解决这个问题？而且即使
JavaFX 小行星游戏克隆 : Having trouble bouncing asteroids off eachother
我正在尝试在 JavaFX 中制作 Asteroids 游戏克隆。到目前为止，我已经能够将飞船和小行星绘制到屏幕上(目前用矩形代表它们)。我还实现了飞船的运动和小行星的随机运动。我在实现小行星相互弹
HTML/CSS : Making them elements besides eachother
我这里有这个问题: http://jsfiddle.net/MRvkT/ 我希望两个盒子彼此相邻，而不是彼此下方。我试着弄清楚出了什么问题，我什至试图删除没有帮助的东西，但只是让 .nextPage
C++ 模板 : Byval/Reference interfering with eachother
这是我的问题的简化版本。我有一个属性类。它有像 has_initalized 这样的数据，我在这个例子中删除了这些数据。当我调用一个使用 T 的函数时，它很好。但是 T& 不是，所以我决定编写它的
html - 来自 float :left and right to under eachother
我正忙于我的投资组合网站，我打算让它响应。大多数事情都是有响应的，但我正在努力处理 contact page . 代码: .footerContact .informatie { float
css - 盒子阴影， float :left and overflow:auto don't like eachother's situation
如果我使用带有 overflow:auto 的父 div，我的盒子阴影就会停止。我该如何解决？ Here我发现我需要使用 position:relative 和 z-index，但这似乎不起作用。 H
C++ 明格 : Two objects of the same class are changing the data across eachother
我是新手。使用类 clsMRDateTime 并在主代码中创建 2 个对象实例。当我激活线路时: clsMRDateTime objMRDateTimeURL("10_05_2011");//T
html - Bootstrap : Centering 2 forms next to eachother in Carousel Template?
我试图在 Twitter 的 Bootstrap 中将两个相邻的表单居中。这是我使用的模板 Bootstrap 这是我目前的代码。它所做的是将它们放在彼此的顶部。
html - 清除 :both to stack two divs on top of eachother (inside parent div)
我已经成功地通过使用 clear:both (.vd-grid-xtra-box) 在 480px 的移动设备上将两个 div 堆叠在一起。它们在父 div 中。不幸的是，我试图将它们都设置为移动设备
ios - swift - SpriteKit : Make sprites reacting to eachothers if added with different "addchild" parents
我在我的场景中添加了几个 Sprite (SKSpriteNode)，如下所示: let NPuzzle_Texture = SKTexture(imageNamed: "SKTexture.png"
android - IBeacon Android 中的 "If two apps register ranges with the same id, they clobber eachother"是什么意思
我只是从 IBeacon 开始。 IBeacon Android 中指定了一个问题，“如果两个应用程序使用相同的 id 注册范围，它们会互相破坏”。我对此不是很清楚。如果有人知道这件事，请帮助我。

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 清除 :both to stack two divs on top of eachother (inside parent div)