定位问题

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

我认为您应该尝试这段代码。它效率不高但有效

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

Answer 2

news-containerdiv只有220pxwidth。将宽度增加到 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/

Answer 3

问题是页面顶部的全宽 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 之外，因此它永远不会出现在其中。这就是它出现在下方并且不会漂浮在红色框旁边的原因。

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

<div class='container'>
    <div class='box-1'>
    </div>
    <div class='box-2'>
    </div>    
</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;
}

您现在可以将内容放入其中并删除硬编码的高度，like this - 请注意高度如何控制容器的高度，并且已添加 vertical-align: top; 以使它们对齐到容器的顶部。

定位问题

Positioning issues

html

css

position