Question

好吧，所以我搜索了互联网，我已经查看了这个网站上至少20个不同的帖子，花了几个小时来处理这个问题，我或者是盲人，或者比我想象的更生气。我在包装器中有两个div-左边的div是float：left，我想将它们彼此分开，但是当我在右边div的左边添加填充或边距时没有任何反应。如果我使用空间代码手动添加空间，它会向下推动段落而不是结束。我不知所措，我尝试使用内联块显示，我尝试浮动右段。排序唯一有效的方法是在左侧框中添加右侧填充，但由于左侧框中的内容居中，因此混淆了左侧框的显示。我上传了网站内容，以便您可以看到我在说什么，并在下面粘贴样式表。任何有关这方面的帮助将不胜感激！我通常只是使用表格和iframe，但我为此大声嚷嚷，所以我试图以“正确的方式”（我猜？）为朋友做这件事。 http://www.djcproductions.net/GSFlook/

/* CSS Reset */
* { margin: 0; padding: 0; }

body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}

#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}

#header {
width: 1024px;
height: 88px;
}

#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}

#nav ul {
float: left;
}

#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}

#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}

#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}

#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}

#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}

#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}

#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}

.shadow{
-moz-box-shadow:    2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow:         2px 5px 5px 1px #ccc;
}

#content{
padding: 118px 0 0 33px;
}

#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}

#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}

#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f; 
}

#scroll li{
padding-top:5px;
list-style-type:none;
}

#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000; 
width: 90%;
padding: 0 0 0 0;
}

p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}

Answer 1

div

<div id="company_info">

不浮动，但id = scroller 的左边的div是。

要获得快速解决方案，您需要制作#company_info：

#company_info {
float: left;
width: 70%;
margin-left: 20px;
}

还要确保在这两个div之后清除浮动！

Answer 2

您没有发布HTML，因此我使用您要查找的参数创建了自己的标记：

<强> HTML

<div class="container">

<div class="left">
    <p>Services</p>
</div>
<div class="right">
    <p>Our company</p>
</div>

<强> CSS

p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
  margin: 0 auto;
  width: 620px;
  height: 400px;
  padding: 10px;
  background: #CCC;
}
.container .left {
  margin: 0 auto;
  float: left;
  width: 300px;
  height: 390px;
  background: #999;
}
.container .right {
  margin: 0 auto;
  float: right;
  width: 300px;
  height: 390px;
  background: #666;
}

jsFiddle

并排div之间的间隔是不可编辑的？

2 个答案: