我有這個問題，其中一個元素是浮動的，我不能設置填充到同一行上的其他元素，因爲它出現在開始，而不是我想要它。Float + Padding = Trouble

HTML

<header> 
     <h1>John Doe</h1> 

    <nav> 
     <ul> 
      <li>Home</li> 
      <li>About</li> 
      <li>Game</li> 
      <li>Contact</li> 
     </ul> 
    </nav> 
</header> 
<div class='body'> 
    <section class="body_heading"> 
      <h2>About Me</h2> 

    </section> 
    <aside> 
     <section>Lorem ipsum</section> 
    </aside> 
    <section class="body_content">lorem ipsum</section> 
</div>

CSS

html, body { 
    min-height: 100%; 
} 
body { 
    background: #f1f1f1; 
} 
header { 
    background: #CAE5FF; 
    float:left; 
    height: 100%; 
    color: gray; 
} 
header > * { 
    padding: 5% 15%; 
} 
header > nav { 
} 
header > nav > ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
header > nav > ul > li { 
} 
.body { 
    padding: 1%; 
} 
aside { 
    float: right; 
}

的問題是頭部和.body元素我想成爲一個小空間，但填充不影響之間它。

來源

2014-12-24 php_nub_qq

給'明確：left'爲'.body'作爲報頭有一個浮動到它。 – anpsmn

@anpsmn，但他們不會在同一行 –

刪除'float：left;'將在小提琴中給完整的標題。 – Bharadwaj

你已經在div.body指定的1%填充工作完全正常。

問題在於header浮動並且沒有寬度。此外，div.body未浮動。因此，div.body佔用了所有寬度，而內容因左側浮動而被移位header。

這可以在這裏看到：http://jsfiddle.net/2fyqqwjx/1/

見div.body綠色邊框？

一個非常簡單的解決方案（與當前的標記）將是給一個寬度爲header，並提供等效margin-left您div.body：

* { box-sizing: border: box; } 
html, body { 
    height: 100%; overflow: hidden; 
} 
header { 
    float: left; 
    height: 100%; 
    width: 20%; /* give a fixed width here */ 
} 
.body { 
    padding: 1%; margin-left: 20%; /* give a margin-left equivalent to header width */ 
}

看到這個演示：http://jsfiddle.net/uc0rh9d0/1/

。

來源

2014-12-24 09:53:44 Abhitalks

.body{padding-left:35% //whatever you want }

來源

2014-12-24 09:42:19

你應該提供一個解釋，除了你的代碼 –

沒有必要這個單行更改，你應該看小提琴。 –

給浮子：左;它足夠了

來源

2014-12-24 09:42:41

在CSS中爲頁眉添加margin-right。

這裏是例子

header { 
background: #CAE5FF; 
float:left; 
height: 100%; 
color: gray; 
margin-right: 10px; 
}

來源

2014-12-24 09:46:45 tacticurv

使用下面的選項

.body{overflow:hidden;} /* or */ 
.body{margin-left:125px;} /* width of left contents + 10 or 20 for some space */

來源

2014-12-24 10:03:22

Float + Padding = Trouble

HTML

CSS

回答

相關問題