Question

在我继续之前，请在将此问题标记为重复之前阅读完整的问题详细信息。

我已经搜索了整个StackOverflow，并且已经花了超过5个小时的时间在gitter上，并且无法解决这个问题。

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

让我解释一下我想要实现的目标：https://docs.google.com/drawings/d/1DvQIzW74lRTZHJCdPh-VBkGv4OXIIqtVxEJRp3S-mk4/edit

我的两个浮动div中的内容真的搞砸了。我正在尝试增加左边div的宽度，但它不会影响它的宽度，右边的div会进一步向左移动，增加白色右边的空间。

我真正想要的是让我的导航项占据他们所做的整个空间，但我无法增加宽度。

此外，我希望右边的内容在中间垂直对齐。

我尝试了内联块，但是左边div中的内容被推到了底部。如果你们认为使用inline-block是一个更好的主意，那么请指导我。

谢谢

对齐两个浮动div中的内容。间距问题

0 个答案: