定位问题
我正在为我的一个个人项目设计这个模板，我经常遇到一些问题，因为我刚接触到html和css。为了使事情更容易理解和解释，我已经采取了屏幕截图和临时改变背景颜色为不同的颜色，这样就更容易看到它在页面上的位置。
请看下面的截图：
我正试着把那个深色的盒子放在红色盒子旁边的蓝色区域里。现在，我在考虑这个问题。一些这样的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 © 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;
}回答 3
Stack Overflow用户
发布于 2015-08-10 17:50:10
问题是，页面顶部的全宽度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之外，因此它永远不会出现在.three-reasonsdiv中。这就是为什么它会出现在下面，不会浮在红色方框旁边。
我在这里建立了一个小的结构，实现你想要的 -你说得对，很多div是不必要的。
<div class='container'>
<div class='box-1'>
</div>
<div class='box-2'>
</div>
</div>集装箱是浅蓝色的盒子，宽980 it。里面有两个盒子。这些框宽220 up，高200 up，并且设置了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;使它们与容器顶部排列一致。
Stack Overflow用户
发布于 2015-08-10 17:30:08
我觉得你应该试试这段代码。它不是有效的，而是起作用的。
.side-div {
width: 220px;
height: 138px;
float: right;
background-color: #474747;
position:absolute;
top:100px;
left:250px;
}Stack Overflow用户
发布于 2015-08-10 17:31:00
news-container div只有220 The width。将宽度增加到470 to。
要使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://stackoverflow.com/questions/31925123
复制相似问题
腾讯云开发者
