Question

我的CSS定位技巧非常差，我无法弄清楚为什么这两个文本框不会在同一条线上。基本上我试图制作两个适合同一行的文本框，并使用溢出来添加滚动条。

他们为什么拒绝彼此相邻阵容？我可以使用绝对定位，但是当我更改浏览器大小时，它会搞砸页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MCrav Resume</title>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>

    <h1 id="title">Matthew Cravinhos Resume</h1>

    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="education.html">Education</a></li>  
        <li><a href="experience.html">Experience</a></li>
        <li><a href="extra.html">Extra Activities</a></li>
        <li><a href="faq.html">FAQ</a></li>
    </ul>


    <img src="profile_pic.jpg" alt="Picture of Matthew Cravinhos" id="pic">


    <div class="text_group">
        <div id="about">
            <h3>About me</h3>

            <p>Here is a section about me. I can fill this in later. Here is         some more text because I need to test width.</p>
        </div>
        <div id="interests">
            <h3>Personal Interests</h3>

            <p>Here is the section about my interests. Again this is some more text to test width.</p>
        </div>
    </div>  
</body>
</html>

这是我的CSS：

#title {
    text-align: center;
    font-family: sans-serif;
}

.navbar {
    border: 1px solid #EA5911;
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.navbar li{
    display: inline;
}

.navbar a {
    display: inline-block;
    padding: 10px;
}

#pic {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    border-width: 10px;
    border-style: ridge;
    border-color: #EA5911;
}

.text_group {
    width: 40%;
}

#about {
    border-width: 5px;
    border-color: black;
    border-style: solid;
    position: relative;
    float: left;
}

#about h3 {
    text-align: center;
}

#interests {
        position: relative;
        float: right;
}

#interests h3 {
    text-align: center;
}

Answer 1

没有足够的空间让盒子彼此相邻，所以它们正在包装。

例如，包装器有width: 40%。

你可以制作width: 100%;并给两个漂浮的孩子一个适合的宽度：

JS Fiddle

.text_group {
    width: 100%;
}

#about {
    border-width: 5px;
    border-color: black;
    border-style: solid;
    position: relative;
    float: left;
    width: 45%;
}
#interests {
    position: relative;
    float: right;
    width: 45%;
}

您可以根据需要使用宽度尺寸，但两个孩子宽度的总和不能超过父母宽度，以便它们并排。

Answer 2

在这里：http://jsfiddle.net/sjvd9gbt/

最大的问题是围绕元素的div设置为40％，因此没有足够的空间让他们并排坐在一起 - 他们默认堆叠在彼此之上。

.text_group {
    width: 100%;
}

Answer 3

如果您使用box-sizing: border-box;，那么您的div可以是50％宽度。你的div也在同一条线上。这些就是诀窍：

.text_group > div {
  width: 50%;
  box-sizing: border-box;
}

请参阅此fiddle

无法弄清楚CSS定位问题

3 个答案: