Sidebar沒有正確定位，儘管CSS

我運行a blog，當我遇到邊欄出現問題時，我正在爲它做一個新的佈局。Sidebar沒有正確定位，儘管CSS

我嘗試了一切儘量移動側邊欄上方的內容，改變位置等，但無濟於事。

body #sidebar { 
 
    width: 25%; 
 
    margin-top: 15px; 
 
    padding-right: 20px; 
 
    padding-top: 20px; 
 
    padding-left: 30px; 
 
    padding-bottom: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 15px; 
 
    float: left; 
 
    clear: both; 
 
    position: relative;  
 
}

<div id="main"> 
 
    <p>Some text</p> 
 
</div> 
 

 
<div id="sidebar"> 
 
    <p>Some text</p> 
 
</div>

我覺得它得是小的東西。我錯過了什麼？

來源

2017-07-28 Cassidy S

變化的順序，第一側邊欄，然後在主股利。 – Grumpy

編輯：爲什麼你的代碼是不工作的原因是p 標籤是塊級元素。因此它佔據了屏幕的整個寬度。（這裏的紅色#main和黑色是#sidebar）

另外，#sidebar您#main後傳來。由於這兩個原因，您的float：left沒有按照您期望的方式工作。這就是爲什麼你有兩種解決問題的方法。你要麼寫前#sidebar #main或您指定顯示：在您的inline-block的 #main。

添加顯示：內聯塊使元件只佔用所需的空間量。

下面的代碼

body #sidebar { 
 
    width: 25%; 
 
    margin-top: 15px; 
 
    padding-right: 20px; 
 
    padding-top: 20px; 
 
    padding-left: 30px; 
 
    padding-bottom: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 15px; 
 
    float: left; 
 
    clear: both; 
 
    position: relative; 
 
} 
 

 
#main{ 
 
    display: inline-block; 
 
}

<div id = "main"> 
 
<p>Main</p> 
 
</div> 
 

 
<div id = "sidebar"> 
 
<p>Some text</p> 
 
</div>

來源

2017-07-28 16:10:13

我這樣做，它解決了這個問題。我不得不在內容下邊的邊欄中，以便它能夠在移動平臺上顯示。謝謝您的幫助！ –

樂意幫忙！ :) –

你的側邊欄應該是第一，那麼你的股利，或使用這段代碼：

#main { 
    width:75%; 
    float: right; 
} 

#sidebar { 
    overflow:hidden; 
}

來源

2017-07-28 16:11:02

試試這個代碼。 HTML

<body> 
<div class="Section"> 
<div id="sidebar"> 
    <p>Some text</p> 
</div> 
<div id="main"> 
    <p>Some text</p> 
</div> 


</div> 

</body>

CSS

#Section{ 

    width:100%; 

} 
#main{ 

    width:75%; 
    float:right; 
} 

#sidebar { 
    width: 25%; 
    float: left; 
    clear: both; 
    position: relative;  
}

來源

2017-07-28 16:17:05

這裏是速戰速決，但我不知道爲什麼你正在經歷重新發明輪子的巨大的頁面。

您是否知道https://getbootstrap.com和https://startbootstrap.com/，我認爲這個頁面已經有https://blackrockdigital.github.io/startbootstrap-portfolio-item/有你正在尋找的東西。查找他們的許可證並使用它。

順便說我把下面的代碼從您的網頁源代碼

body #sidebar { 
    background-color: #fff; 
    /*padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 5px; 
    padding-right: 15px; 
    margin-left: 25px; 
    margin-right: 25px; 
    margin-bottom: 20px;*/ 

    border: 1px solid #975FB4; 
    width:25%; 
    float:left; 

    } 


body #main { 
    /*margin-top: 20px; 
    margin-left: 20px; 
    margin-bottom: 20px;*/ 
    padding:10px; 
    height: auto; 
     width: 75%; 
} 

<div id = "sidebar"> 
<p>Some text</p> 
</div> 

<div id = "main"> 
<p>Some text</p> 
</div>

來源

2017-07-28 16:22:29 Avi

你應該考慮一個「包裝」嵌套在您的div。這對於保持一致性並保持你所有的div應該去的地方很好。使用顯示內聯塊和重新排序你的div將做你所需要的，但真正有一個明確的結構爲您的HTML和CSS將在未來節省您的頭痛負擔。

我做了一個快速的例子，我認爲更基於你的鏈接你試圖實現什麼。 https://codepen.io/morganfens/pen/gxaQVJ

HTML

<div id="sidebar"> 
    <p>I'm a sidebar</p> 
</div> 

<div id="main"> 
    <p>Main Content Goes Here</p> 
</div> 

</div>

CSS

#sidebar { 
    width: 25%; 
    padding-top:15px; 
    padding-bottom:15px; 
    margin-bottom: 15px; 
    display:inline-block; 
    text-align: left; 
} 

#main{ 
    display:inline-block; 
    padding-top:15px; 
    padding-bottom:15px; 
    width:70%; 
    text-align: left; 
}

來源

2017-07-28 16:38:29 morganfens

Sidebar沒有正確定位，儘管CSS

回答

相關問題