Как разместить контент рядом друг с другом без таблицы?

0

Не знаете, как это решить. Мое типичное решение - просто использовать 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

Теги:

2 ответа

0
Лучший ответ

Если вы просто пытаетесь создать 2 столбца, вы можете попробовать следующее:

Поместите левое содержимое здесь

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

Правильный контент здесь

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

и добавьте этот CSS

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

Попробуйте что-то вроде этого:

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню