特定列

Question

我一直在做一些與HTML的東西，我需要有幾列。我知道如何使他們成爲他們工作的基礎。但是，我有一定的問題。我需要有3個頂部有圖像的列，然後是底部的文本。但是，如果瀏覽器調整大小，底部的文本不能流入下一列 - 只需要上下調整。我至今：

body { 
 
    background-color: white; 
 
    font-family: times, serif; 
 
    color: black; 
 
} 
 

 
div { 
 
    display: flex; 
 
    margin: 50px; 
 
    flex-wrap: wrap; 
 
}

<div> 
 
    <div class="first"> 
 
    <img src="Images/australia_flag.jpg" alt="Australian Flag" title="Australian Flag" height="200" width="300"> text as well </div> 
 
    <div class="second"> 
 
    <img src="Images/brazil_flag.jpg" alt="Brazilian Flag" title="Brazilian Flag"> even more text </div> 
 
    <div class="third"> 
 
    <img src="Images/china_flag.jpg" alt="Chinese Flag" title="Chinese Flag" height="200" width="300"> text again 
 
    </div> 
 
</div>

Answer 1

不能完全肯定，如果你的意思是行或列？根據你的代碼，它看起來像行。如果是這種情況，我不確定「流入下一列」是什麼意思？您可以查看CSS position的相對值和絕對值。

如果實際上，你確實是指列，我強烈建議使用Bootstrap's Grid System。這對創建響應式列很有用。

Answer 2

請看看這個簡單的三欄佈局全寬內容區域的頂部和底部位置：https://jsfiddle.net/7drfva0o/2/

.top, .bottom { 
    width:98%; 
    padding:1%; 
    background-color: red; 
    clear:both; 
} 
.cols { 
    width:31%; 
    padding:1%; 
    float:left; 
    background-color:blue; 
    border: 1px solid #FFF; 
} 

這就是你想要的？

Answer 3

首先，你需要提高你的標記：具有圖像和文本的DOM節點是「彎曲」

HTML標記改善

<div class="wrapper"> 
    <div class="column"> 
      <img src="..." /> 
      <p>text</p> 
    </div> 
    <div class="column"> 
      <img src="..." /> 
      <p>text</p> 
    </div> 
    <div class="column"> 
      <img src="..." /> 
      <p>text</p> 
    </div> 
</div> 

然後，每個div的是將有display: flex + flex-direction: column允許圖像在頂部和文本在下面。你將能夠調整保證金或其他。至少，我是這樣的：

CSS改善

.wrapper { 
    display: flex; 
} 

.column { 
    margin: 5px; 
    display: flex; 
    flex-direction: column; 
} 

完全包裹，這裏是什麼，我想你想實現

片段片段

.wrapper { 
 
    display: flex; 
 
} 
 

 
.column { 
 
    margin: 5px; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="wrapper"> 
 
    <div class="column"> 
 
    <img src="http://fakeimg.pl/300x200" /> 
 
    <p>text as well</p> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="http://fakeimg.pl/300x200" /> 
 
    <p>text as well</p> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="http://fakeimg.pl/300x200" /> 
 
    <p>text as well</p> 
 
    </div> 
 
</div>

然後，隨時與flexbox性能發揮到對齊，包裝，調整線路走向等大文件的CSS-技巧：https://css-tricks.com/snippets/css/a-guide-to-flexbox/