将两个外部div放在屏幕上方的中心div上

-3

主题说明了这一切，但我正在寻找一种干净简单的方法来做到这一点。基本上认为它是这样的：将两个外部div放在屏幕上方的中心div上

[A] [__乙_] [A]

到

[A] [A]

[__B_]

希望这是明确的足够，但我可以详细说明是否需要。

提前致谢！

来源

2017-05-24 joebob2524

有多宽应该B时，是100 ％？ – broodjetom

你有任何代码吗？请张贴你已经尝试过的东西。 – blackandorangecat

-1

如果您从一起排列3个元素开始，但您需要元素B在它自己的外部，您将需要使用flexbox。

您将专注于选择器的order属性，并在元素B上使用flex-grow。通读该文档以了解如何设置该文件，或确保完全符合您的需求。否则，您可以转到jQuery。

来源

2017-05-24 14:53:01 Ishio

Flexbox在所有浏览器中都不受支持，并且它不像OP要求的那样容易。 – broodjetom

Flexbox是一个简单的解决方案，并且通过大量的备份得到了广泛的支持。 – Ishio

-2

您可以通过将所有三个div的一个DIV中做到这一点：

<div class="allthree"> 
    <div class="twoas"> 
     <div class="a"></div> 
     <div class="a"></div> 
    </div> 
    <div class="oneb"> 
     <div class="b"></div> 
    </div> 
</div>

现在添加一些CSS这使b为100％宽度，一个是50％的宽度。确保一个是display: inline-block;

.allthree { 
    width: <your-width> 
} 

.allthree .twoas { 
    width: 100%; 
} 

.allthree .twoas .a { 
    display: inline-block; 
    width: 50%; 
} 

.allthree .oneb { 
    width: 100%; 
} 

.allthree .oneb .b { 
    width: 100%; 
}

来源

2017-05-24 14:54:39 broodjetom

这是如何解决这个问题，如果它是从一个3行下来？除非我误解OP。 – Ishio

我正在把一切都放在div中。这两个也应该彼此相邻。这样构造更容易。您正在使用所有浏览器都不支持的flexbox。 – broodjetom

冉你的代码，它不会做OP所要求的。 Flexbox可以解决这个问题，并且很容易添加。你只需要使用订单。 – Ishio

您可以使用Flexbox，就为了那

.flex-container { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
} 
 

 
.flex-item { 
 
\t box-sizing: border-box; 
 
\t background: green; 
 
\t padding: 20px; 
 
\t width: 20%; 
 
\t height: 100px; 
 
    border: 1px solid white; 
 
\t color: white; 
 
\t text-align: center; 
 
} 
 
@media screen and (max-width: 900px){ 
 
\t .flex-item { 
 
\t \t background: green; 
 
\t \t width: 50%; 
 
\t \t height: 100px; 
 
\t \t color: white; 
 
\t \t text-align: center; 
 
\t } 
 
\t .flex-item:nth-of-type(2) { 
 
\t \t order: 3; 
 
\t \t width: 100% 
 
\t } 
 

 
}

<div class="flex-container"> 
 
    <div class="flex-item">div a</div> 
 
    <div class="flex-item">div b</div> 
 
    <div class="flex-item">div a</div> 
 
</div>

在这里阅读更多：https://developer.mozilla.org/en/docs/Web/CSS/order

来源

2017-05-24 15:20:58

将两个外部div放在屏幕上方的中心div上

回答

相关问题