Расположите div рядом с css - PullRequest
Новая
       5

Расположите div рядом с css

1 голос
/ 11 июля 2010

У меня есть этот простой макет на моей странице 

 <div id="content-wrap">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="content" style="height: 550px">

        </div>
        </form>
 </div>

и css: 

#content-wrap
{
 clear: both;
 float: left;
 width: 100%;
}
#content
{
 text-align: left;
 padding: 0;
 margin: 0 auto;
 height: 470px;
 overflow: auto;
    width: 760px;
}

Div "content" центрирован внутри обертки, я хотел бы поместить еще один div рядом с "content" на левой стороне с плавающей и фиксированной шириной почти 200 пикселей Как я могу это сделать?

Заранее спасибо за любую помощь.

Ответы [ 2 ]

1 голос
/ 11 июля 2010

Извините, я неправильно понял, что вы хотели. Посмотри, лучше ли это. 

<html>
<head>
<style type="text/css">
    #content-wrap
    {
     background-color: #EEE;
     clear: both;
     float: left;
     width: 100%;
    }
    #content
    {
     background-color: #0F0;
     text-align: left;
     padding: 0;
     margin: 0 auto;
     height: 470px;
     width: 760px;
    }
    #leftbar
    {
     background-color: #F00;
     float: left;
     width: 200px;
     height: 470px;
     margin-left: -200px;
    }
</style>
</head>
<body>
  <div id="content-wrap">
    <form id="form1" runat="server">
      <div id="content">
        <div id="leftbar">

        </div>
      </div>
    </form>
  </div>
</body>
</html>
0 голосов
/ 11 июля 2010

Вы можете выровнять по центру #content-wrap div, а затем использовать абсолютное позиционирование внутри него для двух внутренних div.Вы используете div с фиксированной шириной, поэтому я не думаю, что это должно быть проблемой. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
    #content-wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 600px;
        background: #eeeeee;
    }

    #content {
        position: absolute;
        left: 215px;
        width: 470px;
        height: 600px;
        background: #cccccc;
    }

    #sidebar {
        position: absolute;
        background: #aaaaaa;
        left: 0;
        height: 600px;
        width: 200px;
    }
</style>
</head>
    <body>
        <div id="content-wrap">
            <div id="content"></div>
            <div id="sidebar"></div> 
        </div>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...