即使他們是塊，他們之間漂浮的元素？

Question

所以前端設計不是真的我的特長...

我試圖讓每個帖子/我的主標題/徽標占100％100％的工作。但是我也試圖將某些元素放置在父元素中，這也是我所做的，但是當網站被調整大小時，元素往往會相互浮動。

有沒有一種方法可以讓它做到讓每個元素都像塊一樣防止浮動？

\t body { 
 
\t \t font-family: 'Raleway', sans-serif; 
 
\t } 
 

 
\t /* Article/Content */ 
 
\t div.article { 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t display: flex; 
 
\t \t justify-content: center; 
 
\t \t align-items: center; 
 
\t \t position: relative; 
 
\t } 
 
\t div.article p { 
 
\t \t font-size: 100%; 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t } 
 
\t div.article div.datetime { 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t position: absolute; 
 
\t \t top: 20px; 
 
\t \t left: 20px; 
 
\t \t display: inline-block; 
 
\t } 
 
\t .hookers { 
 
\t \t vertical-align: middle; 
 
\t  font-size: 700%; 
 
\t  color:#CFD8DC; 
 
\t  letter-spacing: -2px; 
 
\t  font-weight: bold; 
 
\t  text-shadow: 1px 1px #78909C,2px 2px #78909C,3px 3px #78909C,4px 4px #78909C,5px 5px #78909C,6px 6px #78909C,7px 7px #78909C,8px 8px #78909C,9px 9px #78909C,10px 10px #78909C; 
 
\t } 
 

 
\t /* Misc */ 
 
\t .noselect { 
 
\t \t -webkit-touch-callout: none; 
 
\t \t -webkit-user-select: none; 
 
\t \t -khtml-user-select: none; 
 
\t \t -moz-user-select: none; 
 
\t \t -ms-user-select: none; 
 
\t \t user-select: none; 
 
\t }

<link href='https://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
 
<div class="header article"> 
 
\t <span class="hookers noselect">WELCOME</span> 
 
</div> 
 

 
<div class="article"> 
 
\t \t <div class="datetime">Posted on <?= date('Y-m-d'); ?> at <?= time(); ?></div> 
 
\t \t <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
 
</div>

Answer 1

在div.article，將其設置爲position: absolute; 然後設置子塊position:relative;。

最後，使用頂部，底部，左側和右側將塊放置在div內。塊將相對於絕對定位的父容器進行定位。

CSS：

body { 
    font-family: 'Raleway', sans-serif; 
} 

/* Article/Content */ 
div.article { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    position: absolute; 
} 
div.article p { 
    font-size: 100%; 
    font-family: 'Open Sans', sans-serif; 
} 
div.article, div.datetime { 
    font-family: 'Open Sans', sans-serif; 
    position: relative; 

    display: inline-block; 
} 
.hookers { 
    vertical-align: top; 
    height: 100%; 
    width: 100%; 
    display:block; 
    text-align: center; 
    font-size: 700%; 
    color:#CFD8DC; 
    letter-spacing: -2px; 
    font-weight: bold; 
    text-shadow: 1px 1px #78909C,2px 2px #78909C,3px 3px #78909C,4px 4px #78909C,5px 5px #78909C,6px 6px #78909C,7px 7px #78909C,8px 8px #78909C,9px 9px #78909C,10px 10px #78909C; 
} 

/* Misc */ 
.noselect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

HTML

<link href='https://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<div class="header "> 
    <span class="hookers noselect">WELCOME</span> 
</div> 

<div class="article"> 
     <div class="datetime">Posted on <?= date('Y-m-d'); ?> at <?= time(); ?></div> 
     <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
</div> 

Fiddle