定位问题

Question

我正在为我的一个个人项目设计这个模板，我一直遇到问题，因为我是html和css的新手。为了让事情更容易理解和解释，我已经将截图和临时更改的背景颜色用于不同颜色的div，这样就更容易看到它在页面上的位置。

请看下面的截图：

我正试图将那个深色的盒子放在红色框旁边的蓝色区域内。现在，我正在考虑它。其中一些div甚至可能不是必需的。我是否真的需要在浅蓝色背景之上的蓝色div？

由于某种原因，深色盒子不想漂浮在红色盒子旁边。它一直在其他元素下面。

这是我的HTML

<div class="three-reasons">
        <div class="reason-one">
            <div class="news-container">
                <h2>Recent News</h2>
                <h3>TechTarget<span> August 13, 2015</span></h3>
                <p>Adios, Legacy network architectures: Making the jump to NSX</p>
                <h3>Dallas Business Journal<span> August 13, 2015</span></h3>
                <p>What Nexis is doing on the Hill to influence future cyber security legislation</p>
                <div class="side-div"></div>
            </div>
        </div>
    </div>
    <div class="client-showcase">
        <h1>Client Showcase</h1>
        <img src="images/our-clients.png" class="client-logos" alt="Our Clients" />
    </div>
    <footer>
        <div class="footer-content">
            <p>Copyright &copy; 2015 - 2016 Nexishost, inc. All Rights Reserved.</p>
            <ul>
                <li><a href="#">Terms & Conditions</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
    </footer>
</body>
</html> 

这是我的css

.three-reasons {
    width: 980px;
    margin: 50px auto 0 auto;
    background-color: lightblue;
}

.news-container {
    width: 220px;
    background-color: red;
}

.side-div {
    width: 220px;
    height: 138px;
    float: right;
    background-color: #474747;
}

.reason-one {
    width: 470px;
    background-color: blue;
}

.reason-one h2 {
    color: #000;
    font-size: 15px;
    font-weight: normal;
    padding-bottom: 8px;
    border-bottom: 1px solid #dedede;
    font-family: 'Open Sans', sans-serif;
}

.reason-one h3 {
    font-size: 11px;
    color: #333;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.reason-one span {
    color: #999;
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;

}

.reason-one p {
    color: #333;
    max-width: 220px;
    font-size: 13px;
    margin-bottom: 13px;
    font-family: Arial, Helvetica, sans-serif;

}

Answer 1

问题是页面顶部的全宽div在灰色元素之前关闭。以下是您提取并正确对齐的问题代码：

<div class="three-reasons">
    <div class="reason-one">
        <div class="news-container">
        </div>
    </div>
</div>
<div class="client-showcase">
</div>

我还删除了内容以使其更加清晰（请注意，仔细对齐HTML会让您感到痛苦）。

由于.client-showcase div完全在.three-reasons div之外，因此它永远不会出现在<div class='container'> <div class='box-1'> </div> <div class='box-2'> </div> </div> div之内。这就是它出现在下面并且不会浮动在红色框旁边的原因。

我在这里建立了一个小结构，achieves what you want - 你是对的，很多div都不是必需的。

display: inline-block

容器是浅蓝色的盒子，它的宽度为980px。里面是两个盒子。这些盒子的宽度分别为220px和200px，并且.container { width: 980px; background-color: lightblue; } .box-1, .box-2 { width: 220px; height: 200px; background-color: red; display: inline-block; } 设置为使它们彼此相邻排列。你可以把

vertical-align: top;

您现在可以将内容放入其中并删除硬编码的高度like this - 请注意高度如何控制容器的高度，并添加了File f1 = new File("/home/000000_0"); FileReader fr = new FileReader(f1); BufferedReader br = new BufferedReader(fr); while ((line = br.readLine()) != null) { if (line.contains("1999-09-09 00:00:00")){ line = line.replace("1999-09-09 00:00:00", strDate); } System.out.println("====="+line); lines.add(line); } fr.close(); br.close(); 以使其与容器的顶部。

Answer 2

我认为你应该尝试这段代码。它没有效率但工作

.side-div {
    width: 220px;
    height: 138px;
    float: right;
    background-color: #474747;
    position:absolute;
    top:100px;
    left:250px;
}

Answer 3

news-container div只有220px width。将宽度增加到470px。

要将side-div向右浮动，请将其置于其他内容之上 -

<div class="news-container">
    <div class="side-div"></div>
    <h2>Recent News</h2>
    <h3>TechTarget<span> August 13, 2015</span></h3>
    <p>Adios, Legacy network architectures: Making the jump to NSX</p>
    <h3>Dallas Business Journal<span> August 13, 2015</span></h3>
    <p>What Nexis is doing on the Hill to influence future cyber security legislation</p>
</div>

https://jsfiddle.net/fn7kxckk/