將兩個外部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上

回答

相關問題