響應寬度

我試圖讓三個div佔據每個寬度的三分之一（33％），但是當我調整窗口大小時，它們跳到各處並且不正確排列。我究竟做錯了什麼？響應寬度

HTML

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div>

CSS

.step{ 
    width:33%; 
    height:200px; 
    display:inline-block; 
} 
.fa{ 
    color:darkgray; 
    width:100%; 
    margin-top:5%; 
} 
i{ 
    text-align:center; 
} 
.step p{ 
    padding:5%; 
    text-align:center; 
}

來源

2016-12-13 Alistair

的問題是，在div元素之間的空白也佔用空間（因爲他們是display:inline-block）。

解決方案1：刪除空白

使用HTML註釋刪除空格（還添加vertical-align:top讓他們頂部對齊時，他們具有不同的高度）

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

解決方案2：使用float:left

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    float:left; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

解決方案3：使用flexbox（最現代和更合適時下）

這需要一個包裝元素。

.steps{display:flex} 
 
.step { 
 
    height: 200px; 
 
    flex: 0 0 1; 
 
} 
 
.fa { 
 
    color: darkgray; 
 
    width: 100%; 
 
    margin-top: 5%; 
 
} 
 
i { 
 
    text-align: center; 
 
} 
 
.step p { 
 
    padding: 5%; 
 
    text-align: center; 
 
}

<div class="steps"> 
 
    <div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
    </div> 
 
</div>

來源

2016-12-13 18:17:04

這是使用display: inline-block;代替float的副作用。

使用inline-block，您的瀏覽器將把任何換行符在你的代碼空間，所以什麼實際呈現在你的情況是：

div (space) div (space) div

通過在您的div之間的代碼去除換行符，你可以解決這個問題。或者，您可以在後面使用float: left;和結算要素。

刪除換行符：https://jsfiddle.net/qzdxtwhx/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div><div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div><div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div>

使用浮動：https://jsfiddle.net/qzdxtwhx/1/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 
<div class="clear"></div>

.step{ 
    width:33%; 
    height:200px; 
    float: left; /*Replace display: inline-block; */ 
} 

.clear { /*Add a 'clear' element to preserve natural layout*/ 
    clear: both; 
}

來源

2016-12-13 17:33:55 Santi

您需要使用浮動：左;並刪除顯示：inline-block; 替換您的.step css以下內容

.step {width：33％;高度：200像素; float：left;}

float屬性是非常常用的。雖然在我看來這對初學者來說有點不直觀。

來源

2016-12-13 17:38:22 Brian

將它們包裝在一個父級div中，並將該div的font-size設置爲0，這將消除將行爲分解爲單獨行的換行符。你可以像Santi一樣使用float，但我更喜歡親自使用inline-block，我發現它更加防彈，浮動需要清除，不能垂直對齊。

<div class="parent"> 
    <div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
    </div> 
</div>

CSS：

.parent{ 
    font-size: 0; 
}

來源

2016-12-13 17:38:30 Pixelomo

回答

相關問題