特定列

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/