Question

不确定如何解决这个问题。我的典型解决方法是使用float：right / left;这就是我目前所使用的。

感谢所有帮助。

我尝试了不同的显示和位置，似乎没有解决问题。我所要做的就是将左侧身体复制到右侧身体。有点像镜子翻转。

HTML：

<div class="okbar">
<div class="okbarlinks">
<ul class="okbarul">
<li><a href="#">~{HOME}~</a></li>
<li><a href="#">~{ABOUT}~</a></li>
<li><a href="#">~{CONTACT}~</a></li>
</ul>
</div>
</div>
<div class="whitestrip"></div>
<div class="linksbar">
<div class="logo"></div>
<div class="logo2"></div>
<div class="tabs">
<nav><ul style="min-width:90%;">
<li><a href="home.html"><img src="images/b_home.png"></a></li>
<li><a href="#"><img src="images/g_portfolio.png"></a></li>
<li><a href="#"><img src="images/g_grades.png"></a></li>
<li><a href="#"><img src="images/g_school.png"></a></li>
</ul></nav>
</div>
</div>
<div class="bluebody">
<h2 class="bluebodyheaderfont" style="margin-left:200px;margin-top:20px;position:absolute;">Featured Article . . .</h2>
</div>
<div class="mainbody">
<div class="leftbodyheader">
<h2><strong>Hi, are you new here?</strong></h2>
<hr style="width:50%;float:left;">
</div>
<div class="leftbody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo sapienme
 eu lacinia tellus ultricies egestas. Nam vitae orci et orci laoreet scelerisque. Vivm
us varius odio at tempor dictum. In nec leo metus. Quisque adipiscing dui ut dui r
<br/>
<br/>
utrum, non dapibus nunc pretium. Integer ornare venenatis aliquet. Quisque cong
ue auctor neque ac euismod. Curabitur ornare lacinia neque egestas imperdiet. V
estibulum metus sem, placerat vel tristique ut, pulvinar in massa. Donec pretium f
ringilla consequat. Proin quis aliquam lacus. Pellentesque suscipit leo quam, a el
<br/>
<br/>
eifend purus ullamcorper sit amet. Etiam porta elementum nunc, a scelerisque fel
is porta at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuer
e cubilia Curae; Curabitur consectetur massa id odio volutpat, id posuere nisi dap
ibus. Nullam malesuada ultricies elementum. Cras sapien velit, molestie eget ipsu
m lobortis, ultricies hendrerit lacus. Nam rhoncus tristique turpis ac ullamcorper. 
<br/>
<br/>
Suspendisse rhoncus ullamcorper sapien. Nunc tincidunt dui vehicula cursus fau
cibus. In in nisl ut nisl pretium dignissim sit amet vel odio. Mauris luctus sem sed 
vehicula lacinia. Donec dignissim molestie ligula, sit amet convallis dui pulvinar si</p>
</div>
<div class="rightbodyheader">
<h2><strong>Latest Projects</strong></h2>
<hr style="width:50%;float:right;">
</div>
<div class="rightbody">

</div>
</div>

CSS：

body{
overflow-y: scroll;
}
.okbar{
width:100%;
background-color:black;
color:black;
height:25px;
min-width:90%;
}
.okbarlinks li{
list-style-type:none;
display:inline;
padding:0px 10px 0px 10px;
float:right;
margin-top:5px;
}
.okbarlinks a{
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color:#8a8a8a;
transition:all 1s ease;
-webkit-transition-delay:all .5s ease;
-moz-transition-delay:all .5s ease;
-ms-transition-delay:all .5s ease;
-o-transition-delay:all .5s ease;
}
.okbarlinks a:hover{
color:#FFFFFF;
}
.whitestrip{
width:100%;
height:1px;
background-color:white;
color:white;
text-align:center;
}
.linksbar{
background: url('images/blacktabbar.jpg');
background-color:black;
width:100%;
height:102px;

}
.logo{
background: url('images/logo2.png');
height:102px;
margin-left:5%;
width:68px;
background-repeat:no-repeat;
background-position:center;
float:left;
}
.logo2{
background: url('images/logo.png');
height:102px;
width:200px;
padding-left:30px;
background-repeat:no-repeat;
background-position:center;
float:left;
}
.bluebody{
background: url('images/bluebar.jpg');
width:100%;
height:200px;
margin-top:1px;
}
.tabs li{
display:inline;
}
.mainbody{
margin-top:20px;
}
.leftbody{
float:left;
width:50%;
text-align:left;
padding-left:20px;
margin-top:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}
.rightbody{
float:right;
width:50%;
text-align:right;
padding-right:20px;
margin-top:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}
.leftbodyheader{
font-weight:bold;
margin-left:50px;
font-size:22px;
}
.rightbodyheader{
font-weight:bold;
margin-right:50px;
font-size:22px;
float:right;

}
.tabs{
position:absolute;
text-align:center;
width:100%;
}
.bluebodyheaderfont{
font-size:22px;
font-family:'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
}

JSFiddle

Answer 1

如果您只是想创建2列，可以试试这个：

将左侧内容放在此处

<div class-"leftbodycontainer">
...
</div>

此处的正确内容

<div class-"rightbodycontainer">
...
</div>

并添加此CSS

.leftbodycontainer {float: left; width: 50%;}
.rightbodycontainer {float: left; width: 50%;}

Answer 2

尝试这样的事情：

CSS：

 /* * * * * * * * * * * * * * * * * * * * *
 *           TWO COLUMN LAYOUT            *
 * * * * * * * * * * * * * * * * * * * * */

 #left {
  width: 50%;
  float: left;
 }

 #right {
  width: 40%;
  float: right;
 }

HTML：

<section id="left">

    <h3>Left</h3>
    <p>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices</p>
    <p>. Vestibulum ante ipsum primis in faucibus orci luctus</p>
  </section>
  <section id="right">

    <h3>Right</h3>
    <p>. Vestibulum ante ipsum primis in faucibus orci luctus et</p>
    <p>. Vestibulum ante ipsum primis in faucibus orci luctus</p>
    </ul>

  </section>

如何在没有桌子的情况下将内容放在彼此旁边？

2 个答案: