Html 定位问题

我正在为我的一个个人项目进行这个模板设计，因为我不熟悉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> 

---

我想你应该试试这段代码。它不是有效的，而是有效的

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

---

新闻容器

div

只有220px

宽度

。将宽度增加到470px

要向右浮动

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

近期新闻
TechTarget 2015年8月13日
Adios，传统网络架构：跳转到NSX

达拉斯商业杂志2015年8月13日
Nexis在山上做了什么来影响未来的网络安全立法

---

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

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

容器是浅蓝色的盒子，宽980px。里面有两个盒子。这些框的宽度均为220px，高度均为200px，并设置了

display:inline block

以使它们彼此并排排列。你可以把

.container {
    width: 980px;
    background-color: lightblue;
}

.box-1, 
.box-2 {
    width: 220px;
    height: 200px;
    background-color: red;
    display: inline-block;
}

---

您现在可以将内容放入容器中，并删除硬编码的高度，-注意高度如何控制容器的高度，以及

vertical align:top已添加，使其与容器顶部对齐。
太棒了，非常感谢。你的代码比我的干净多了。当我翻看我的代码，看到所有这些div一个接一个的时候，我知道有些事情看起来很有趣。。你费了好大劲才研究、解决和解释了这个问题。谢谢你花时间这么做。我将删除我对这个问题的看法，并遵循你的建议。希望最终结果和你的一样好看。我真是太感谢你了。谢谢：-）我觉得刚开始的时候，代码中很容易出现一些不必要的内容，这常常会导致问题，我发现如果我开始一点一点地删除这些内容，看到效果，我就可以摆脱很多，有时问题就会显现出来：-）
<div class='container'>
    <div class='box-1'>
    </div>
    <div class='box-2'>
    </div>    
</div>

.container {
    width: 980px;
    background-color: lightblue;
}

.box-1, 
.box-2 {
    width: 220px;
    height: 200px;
    background-color: red;
    display: inline-block;
}