浮點或位置：絕對;我沒有得到它

-2

我是一個完整的noob，當它來到CSS和HTML，我試圖讓2圖像一個向左漂浮，另一個右所以我可以在他們下面放置一些文本。浮點或位置：絕對;我沒有得到它

我遇到的問題是浮動命令和位置指令既東西了頁面結構，我不知道爲什麼

我用盡一個浮子和一個位置：絕對的;但他們仍然都塞滿了網頁。，因爲除了圖像和H1和H2之外，它們在HTML頁面上沒有任何內容，頁眉和頁腳都位於頁面的頂部。

任何幫助將不勝感激

感謝約翰

P.S我還在學習

what I've got

what i want

來源

2017-06-16 John G

我會避免使用浮動來獲得在同一條直線元素 - 給boththe圖像顯示'的CSS規則：直列block' – ThisGuyHasTwoThumbs

您在使用任何類型的網格？ – Amy

位置：財產 - 在非常困難的情況下使用它，也可以用於定位其他問題。元素像圖標/標誌和其他元素應始終粘在一個位置。

浮動：財產 - 當我需要的內聯元素，我知道自己應該堅持在頁面或父容器的一側使用。

display： inline-block - 這是我用來顯示內聯內嵌塊的內聯塊，例如<p></p>是一個內聯塊。但這有「副作用」，總會有空白之間行內塊。

如果要居中浮動元素

：

 <style> 
      .container { 
      text-align: center; 
      width: 100%; 
      } 

      .centered-box { 
      display: inline-block; 
      max-width: 100%; 
      } 

      .elm { 
      float: left; 
      width: 300px; 
      max-width: 50%; 
      } 
     </style> 


     <div class="container"> 
      <div class="centered-box"> 
      <div class="elm"> 
      </div> 

      <div class="elm"> 
      </div> 
      </div> 
     </div>

而且，浮動元素不作爲塊。他們被迫浮到你聲明的邊，直到父容器牆或其他浮動元素。如果你想爲浮動元素使用給空間：

.clearfix::before { 
    content: ""; 
    display: table-cell; 
} 

.clearfix::after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

<div class="clearfix"> 
// flaoted elements 
</div>

來源

2017-06-16 12:09:31

這裏有一個框架。

header, 
 
footer { 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.leftcolumn, 
 
.rightcolumn { 
 
    width: 40%; 
 
}

<header>header</header> 
 
<div class="container"> 
 
    <div class="leftcolumn"> 
 
    <h1>header 1</h1> 
 
    <img src="http://placehold.it/200"> 
 
    <p>Text</p> 
 
    </div> 
 
    <div class="rightcolumn"> 
 
    <h1>header 1</h1> 
 
    <img src="http://placehold.it/200"> 
 
    <p>Text</p> 
 
    </div> 
 
</div> 
 
<footer>footer</footer>

來源

2017-06-16 12:14:55 Gerard

浮點或位置：絕對;我沒有得到它

回答

相關問題