對齊兩個浮動div內的內容。間距問題

在繼續之前，請在將此問題標記爲重複項之前，先閱讀完整的問題詳細信息。對齊兩個浮動div內的內容。間距問題

我已經搜索了整個StackOverflow，並花了超過5個小時在gitter上，並沒有能夠解決這個問題。

#container { 
 
    max-width: 50%; 
 
    margin: 5% auto; 
 
    border: 5px solid black; 
 
} 
 

 
#container:after { 
 
    content: " "; 
 
    height: 0; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
#doin, #rgb { 
 
    max-width: 100%; 
 
} 
 

 
#doin:hover { 
 
    background: blue; 
 
    color: white; 
 
} 
 

 
#left { 
 
    float: left; 
 
    max-width: 30%; 
 
} 
 

 
#right { 
 
    max-width: 70%; 
 
    float: left; 
 
} 
 

 
.doin, .rgb { 
 
    max-width: 96%; 
 
    display: block; 
 
    margin: 2% auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Ayush Bahuguna | Work</title> 
 
    <link rel="stylesheet" type="text/css" href="assets/css/work.css"> 
 
</head> 
 
<body> 
 
<div id="header"><h1>Projects</h1></div> 
 
<div id="container"> 
 
    <nav id="left"> 
 
     <ul> 
 
      <li id="doin">Doinmin</li> 
 
      <li id="rgb">Guess The RGB</li> 
 
     </ul> 
 
    </nav> 
 

 
    <div id="right"> 
 
     <img src="assets/img/doinmin.png" class="doin"><p class="doin" id="dpara">This project started as a basic to-do app, but along the way I turned it into something that I use while practicing a musical instrument. The app can be used to deal with big tasks that can be broken down into smaller tasks, with each task being dealt with for a certain amount of time. It prevents you from getting overwhelmed. The app is built using HTML5, CSS3, and jQuery.</p> 
 
     <img src="assets/img/rgb.png" class="rgb"><p class="rgb" id="rpara">This is the second major project that I undertook while learning JavaScript. The code relies heavily on functional programming, particularly, the use of higher order functions. A random rgb(x, y, z) is generated, and one has to guess the correct color out of the 6, under hard level, or 3, under easy level, colors. </p> 
 
    </div> 
 
</div> 
 
<div id="clear"></div> 
 
<script type="text/javascript" src="assets/js/work.js"></script> 
 
</body> 
 
</html>

讓我解釋什麼，我想實現：https://docs.google.com/drawings/d/1DvQIzW74lRTZHJCdPh-VBkGv4OXIIqtVxEJRp3S-mk4/edit

裏面我的兩個浮動的div是真的搞砸up.I我想提高我的左的寬度內容div，但不會影響其寬度，右側div會進一步向左移動，從而增加右側的空白區域。

我真正想要的是讓我的導航項佔據整個空間，但他們所做的卻是我無法增加寬度。

此外，我希望右邊的內容在中間垂直對齊。

我嘗試了內聯塊，但左邊div的內容被推到底部。如果你們認爲使用內聯塊將是一個更好的主意，那麼請引導我。

謝謝

來源

2016-12-04 relentless-coder

你的'work.js'文件是什麼？ –

只是兩個事件。它們用於切換右側內容的顯示。 –

這樣的總結，U想達到什麼做的是在右左和內容導航。和它自己的內容垂直對齊中間。我不記得它是否應該水平居中。

忘記浮動：從一開始就留下
使用Flex中，可以發現它在這裏all about flex
看到我的代碼
如果你喜歡它，刪除你的代碼，並與我

.wrap{ 
 
width:100%; 
 
height:300px; 
 
display:flex; 
 
align-items:center; 
 
justify-content:center;} 
 

 
.wrapception{ 
 
width:75%; 
 
height:100%; 
 
position:relative; 
 
display:flex; 
 
flex-direction:row; 
 
flex-wrap:wrap; 
 
} 
 

 
nav{ 
 
background:yellow; 
 
width:30%; 
 
height:100%;} 
 

 
section{ 
 
background:red; 
 
width:70%; 
 
height:100%; 
 
display:flex; 
 
align-items:center;}

<body> 
 
<h1>Projects</h1> 
 
<div class="wrap"> 
 
<div class="wrapception"> 
 
    <nav>asdasd</nav> 
 
    <section>asdasdsad</section> 
 
</div> 
 
</div> 
 
</body>

來源

2016-12-04 09:08:38 Obink

嗨，我試過你的代碼，但這是我得到的。 https://jsfiddle.net/ktk9p5me/，這是我想要的https://docs.google.com/drawings/d/1DvQIzW74lRTZHJCdPh-VBkGv4OXIIqtVxEJRp3S-mk4/edit –

對齊兩個浮動div內的內容。間距問題

回答

相關問題