Css - Выровнять <Div>с - PullRequest
Новая
       5

Css - Выровнять <Div>с

0 голосов
/ 22 января 2011

Я новичок в веб-дизайне, и у меня есть 2 <div> теги, которые содержат данные объявления и приветствия. Я хотел бы выровнять их рядом друг с другом. Но вместо этого они друг на друга.

Я пытался плавать один div влево, а другой вправо, давая ширину div. Но у меня все еще есть несколько проблем. Я пытаюсь выровнять div-области объявления и области приветствия. Вот мой код:

HTML: 

<body>
        <div id="page-wrap">    
            <ul id="nav" align="center">
                <li class="home"><a href="#">Home</a></li>
            <li class="directory"><a ref="#">Directory</a></li>             
                <li class="calender"><a href="#">Calender</a></li>
                <li class="photos"><a href="#">Photos</a></li>
                <li class="links"><a href="#">Links</a></li>                
            </ul>

            <div id="main-content">
                <div id="welcome-area">
                    <img src="Images/welcome-header.jpg" alt="header top" />
                    <div id="welcome-content">                      
                        <p>
                            Welcome to the official website of the Lambda Chi Alpha Delta Beta Zeta Chapter at NSU. 
                            This site will be used to inform members of events and show everyone what the fraternity 
                            is up too. Take a look around!
                        </p>
                    </div>
                </div>

                <div id="announcements-area">   
                    <img src="Images/announcements-top.jpg" alt="announcement top" />
                    <div id="announcements-content">
                        <h4 class="announcement-header">Website is Live!</h4>
                        <p class="metadata">Friday, 1/21/2011</p>

                        <p>
                            The new website for the Delta Beta Zeta Chapter 
                            of Lambda Chi Alpha is now live. Welcome!
                        </p>
                    </div>
                </div>

                <div class="clear"></div>
            </div>  



            <div id="footer">
            </div>
        </div>          
</body>

CSS: 

#page-wrap{
    width:1040px;
    margin: 0 auto;
    background-image: url('../Images/content-background.jpg');
    background-repeat:repeat-y;
    }
    #main-content{
        padding-top:10x;
        padding-right:50px;
        padding-left:70px;
        }
        #announcements-area{
            background-image: url('../Images/announcements-content.jpg');
            background-repeat: repeat-y;
            float:left;
            }
            #announcements-content{
                padding-left:15px;
                padding-right:730px;
                padding-bottom:10px;
            }
        #welcome-area{
            background-image: url('../Images/welcome-content.jpg');
            background-repeat: repeat-y;
            float:right;
            }
            #welcome-content{

                padding-left:15px;
                padding-right:350px;
                padding-bottom:10px;
            }
#footer{
    min-height:185px;
    background-image: url('../Images/footer.jpg');  
    background-repeat:no-repeat;
}

Вот скриншот того, как выглядят div сейчас. Они на вершине друг друга. Я хочу, чтобы они были рядом друг с другом.

Screenshot

Ответы [ 4 ]

0 голосов
/ 09 февраля 2014

Вы должны установить родительский элемент в положение: относительное, чтобы расположить дочерние элементы. Кроме того, вы должны дать вашим дочерним элементам ширину, если вы хотите, чтобы они плавали рядом друг с другом (оба оставались плавающими). Вот код, который работает: 

    #page-wrap{
        width:1440px;
        margin: 0 auto;
        background-image: url('../Images/content-background.jpg');
        background-repeat:repeat-y;
        position:relative;
    }

    #main-content{
        padding-top:10x;
        padding-right:50px;
        padding-left:70px;
    }
    #announcements-area{
        background-image: url('../Images/announcements-content.jpg');
        background-repeat: repeat-y;
        float:left;
        position:relative;
        width: 500px;
    }
    #announcements-content{
        padding-left:15px;
        padding-right:30px;
        padding-bottom:10px;
    }
    #welcome-area{
        background-image: url('../Images/welcome-content.jpg');
        background-repeat: repeat-y;
        width: 500px;
        float:left;
        position:relative;
    }
    #welcome-content{
        padding-left:15px;
        padding-right:50px;
        padding-bottom:10px;
    }
    #footer{
        min-height:185px;
        background-image: url('../Images/footer.jpg');  
        background-repeat:no-repeat;
    }
0 голосов
/ 22 января 2011

Попробуйте это: 

<div id="container" style="width:100%;">
   <div id="left" style="width:50%;float:left;border:1px solid red;">asdfasdf</div>
   <div id="right" style="border:1px solid blue;">asdfasdf</div>
   <div style="clear:both;"></div>
</div>

У меня есть границы в их только для иллюстративных целей.

0 голосов
/ 20 декабря 2012

отредактируйте вашу CSS с этими изменениями: 

#announcements-area{
    background-image: url('../Images/announcements-content.jpg');
    background-repeat: repeat-y;
    float:left;
    width:50%;
}

#announcements-content{
    padding:15px;
}

#welcome-area{
    background-image: url('../Images/welcome-content.jpg');
    background-repeat: repeat-y;
    float:right;
    width:50%;
}

#welcome-content{
    padding:15px;
}
0 голосов
/ 22 января 2011

Попробуйте удалить большой отступ слева от содержимого приветствия и справа от содержимого объявления. Это, вероятно, делает их шире, чем они кажутся, и они не могут помещаться рядом в кадре.

Бесценным инструментом для рассмотрения подобных вещей является расширение firebug и панель инструментов веб-разработчика. После того, как вы установили firebug, вы можете щелкнуть правой кнопкой мыши на элементе на странице, нажать «Проверить элемент», а затем вы можете навести курсор мыши на него в источнике и посмотреть, где отступы и поля влияют на размер и расположение элементов.

В ZAX, Брайан

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

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

...