CSS左側和右側

我正在學習CSS，現在叫你知道什麼樣的問題，試圖吹我的心......哈哈哈CSS左側和右側

歐凱，我試圖分開我的網頁在兩個div像這樣：

enter image description here

和意圖是右側意識到有什麼東西在他的左邊。

左側：

.left-side { 
    background: url('../img/mesh.png') #333; 
    position: relative; 
    top: 0px; 
    margin-left:0px; 
    width: 100px; 
    height: 100%; 
}

右側：這裏的問題

.right-side { 
    position: relative; 
    margin-left: 100px; 
    top: 0px; 
    float: left; /* Trying to detect something at my left */ 
    height: 100%; 
    width: 100%; 
}

兩個有相對位置，因爲我看了他們應該，也許我錯了......

只是爲了給你一些背景，左側是導航欄，右側是網格和主要內容。

我在右側使用引導框架來創建網格，但問題是所有的div都不會將它們的父類作爲參考。

<html> 
<head> 
    ..... 
</head> 
<body> 
    <div class="left-side"> 
     <!-- Navbar --> 
    </div> 
    <div class ="right-side"> 
     <div class ="container-fluid"> 
     <!-- etc --> 
     </div> 
    </div> 
</body> 
</html>

感謝您閱讀本文。我會嘗試解決這個由我自己，一些幫助將得到很好的接收

來源

2013-03-28 Jesus

擁有'top：0px;'在相對定位的元素上沒有任何作用。你的意思是讓他們都成爲'position：absolute;'？（左邊的條必須有一個固定的[就像可以用一個單位指定一個數字]的寬度一樣） – Ryan

謝謝，絕對在左邊工作，但是怎麼樣？正確的一個，我給了它一個左邊距，但我認爲還有另一個更好的方法.. – Jesus

左邊距也很好，但不要用'width：100％'。（但是，如果Bootstrap提供了方法來做到這一點（顯然它確實是這樣），那麼就用這些方法代替。 – Ryan

你應該使用什麼Bootstrap給你，這是跨班級。那樣的事情呢？

<html> 
<head> 
    ..... 
</head> 
<body> 
    <div class="row-fluid"> 
     <div class="span3"> 
      <!-- left side --> 
     </div> 
     <div class="span9"> 
      <!-- right side --> 
     </div> 
    </div> 
</body> 
</html>

來源

2013-03-28 19:13:17 woz

謝謝，也許我錯了，但span9不會限制像素？對不起，我不知道如何解釋自己（而不是英文）。我的意思是我想把右側的一切都給予，但左側的需要。 – Jesus

是的，當你使用'row-fluid'時，它將如何工作。試試看看它是否是你想要的。 – woz

謝謝，它的工作哈哈。我更改span1的第一個跨度和span11的第二個跨度。這是正確的？。除此之外，這是一個很大的事情，讓它簡單愚蠢！ :) – Jesus

將float: left;添加到左側。所以，它的元素向左。

來源

2013-03-28 19:14:00 CoursesWeb

這打破了'寬度：100％'。沒有它，它也不會跨越正確的寬度。 – Ryan

您可能不需要相對位置。通常最好的方法就是當你需要在裏面放置一些東西時 - 也就是說，相對於你所稱的相對盒子。

要使用像這樣的浮動，您需要設置寬度，並且它們不能設置爲100％。這樣做意味着它們佔用了與其容器相同的空間，在這種情況下，它看起來像整個屏幕。這意味着正確的div將包裝在左邊的下方，因爲它不能放在旁邊。首先將左邊的寬度設置爲100px，右邊的寬度設置爲500px，或者類似的東西，然後從中進行播放。

並讓左側浮動：左側，如同指出的那樣。

來源

2013-03-28 19:14:15 atw13

CSS左側和右側

回答

相關問題