1. дома
  2. Вопрос и ответ
  3. Side by Side Div не выравнивается

Side by Side Div не выравнивается

2013-03-04 3 views
0

Я искал весь день для решения. Там может быть один, но я не понимаю объяснений, которые даются CSS и DIV.Side by Side Div не выравнивается

Ссылка или помощь были бы очень признательны. Я пытаюсь разместить DIV бок о бок в обертке, и я не могу понять, почему они не выстраиваются в линию.

Благодарим вас за помощь. ~ Donavon

Левая направляющая = 75% и правая позиция = 25%, поэтому она должна равняться 100% обертки, которая составляет 95%. Но правая рубрика обертывается.

И

левый, средний и правый портлет разделы должны выравнивать на той же строке ..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <title>test-columns</title> 

    <style type="text/css"> 
    #buttons { 
     border:    1px solid; 
     text-align:   center; 
     width:    95%; 
     margin:    0 auto; 
    } 


    #container_heading { 
     border:    1px solid; 
     width:    95%; 
     text-align:   center; 
     margin:    0 auto; 
    } 

    #left_heading { 
     border:    1px solid; 
     float:    left; 
     width:    75%; 
     text-align:   center; 
     margin:    0; 
     padding:   0; 
    } 

    #right_heading { 
     border:    1px solid; 
     float:    right; 
     width:    25%; 
     text-align:   center; 
     margin:    0; 
     padding:   0; 
    } 


    #controls { 
     clear:    both; 
     border:    1px solid; 
     text-align:   center; 
     width:    95%; 
     margin:    0 auto; 
    } 



    #sections { 
     border:    1px solid; 
     margin:    0px auto; 
     width:    95%; 
    } 

    #left_portlets { 
     border:    1px solid; 
     text-align:   center; 
     float:    left; 
     width:    33%; 
     margin:    0 auto; 
    } 

    #middle_portlets { 
     border:    1px solid; 
     text-align:   center; 
     width:    33%; 
     margin:    0 auto; 
    } 

    #right_portlets { 
     border:    1px solid; 
     text-align:   center; 
     float:    right; 
     width:    33%; 
     margin:    0 auto; 
    } 


</style> 



</head> 

<body style="margin: 0" > 

    <div id="buttons"> 
    Buttons 
    </div> 

    <br /><br /> 


    <div id="container_heading"> 
    <div id="left_heading"> 
     Left Heading 
    </div> 

    <div id="right_heading"> 
     Right Heading 
    </div> 
    </div> 

    <br /><br /> 

    <div id="controls"> 
    Controls 
    </div> 

    <br /><br /> 


    <div id="sections"> 
    <div id="left_portlets"> 
     <div id="1-1_portlet"> 
     1-1 Portlet 
     </div> 

     <div id="1-2_portlet"> 
     1-2 Portlet 
     </div> 

     <div id="1-3_portlet"> 
     1-3 Portlet 
     </div> 
    </div> 

    <div id="middle_portlets"> 
     <div id="2-1_portlet"> 
     2-1 Portlet 
     </div> 

     <div id="2-2_portlet"> 
     2-2 Portlet 
     </div> 

     <div id="2-3_portlet"> 
     2-3 Portlet 
     </div>  
    </div> 

    <div id="right_portlets"> 
     <div id="3-1_portlet"> 
     3-1 Portlet 
     </div> 

     <div id="3-2_portlet"> 
     3-2 Portlet 
     </div> 

     <div id="3-3_portlet"> 
     3-3 Portlet 
     </div> 
    </div> 
    </div> 

</body> 
</html>

+ ---------------- -------------------------------------------------- --------------- +

EDIT:
Ничего себе. Это помогло много ...

Я забрал процентную точку от ширины, чтобы компенсировать границы и добавил «display: inline-block;» к div, которые расположены рядом друг с другом и «box-size: border-box»; для всей таблицы стилей.

Вещи теперь выстроились на ряды. Но теперь, как я могу увеличить внешние границы, чтобы все было квадратным? Каждый раз, когда я делаю небольшое изменение, макет ломается.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test-columns</title> 

<style type="text/css"> 
/* apply a natural box layout model to all elements */ 
* { -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; } 


#buttons { 
    border:    1px solid; 
    text-align:   center; 
    width:    95%; 
    margin:    0 auto; 
} 


#container_heading { 
    border:    0px; 
    width:    95%; 
    text-align:   center; 
    margin:    0 auto; 
} 

#left_heading { 
    border:    1px solid; 
    width:    74%; 
    text-align:   center; 
    margin:    0; 
    padding:   0; 
    display:   inline-block; 
} 

#right_heading { 
    border:    1px solid; 
    width:    24%; 
    text-align:   center; 
    margin:    0; 
    padding:   0; 
    display:   inline-block; 
} 


#controls { 
    clear:    both; 
    border:    1px solid; 
    text-align:   center; 
    width:    95%; 
    margin:    0 auto; 

} 

#sections { 
    border:    0px; 
    margin:    0px auto; 
    width:    95%; 
    text-align:   center; 
} 

#left_portlets { 
    border:    1px solid; 
    text-align:   center; 
    width:    31%; 
    margin:    0 auto; 
    display:   inline-block; 
} 

#middle_portlets { 
    border:    1px solid; 
    text-align:   center; 
    width:    31%; 
    margin:    0 auto; 
    display:   inline-block; 
} 

#right_portlets { 
    border:    1px solid; 
    text-align:   center; 
    width:    31%; 
    margin:    0 auto; 
    display:   inline-block; 
} 

</style> 



<script type="text/javascript" language="javascript"> 
</script> 

</head> 

<body style="margin: 0" > 

    <div id="buttons"> 
    Buttons 
    </div> 




    <div id="container_heading"> 
    <div id="left_heading"> 
     Left Heading 
    </div> 

    <div id="right_heading"> 
     Right Heading 
    </div> 
    </div> 



    <div id="controls"> 
    Controls 
    </div> 




    <div id="sections"> 
    <div id="left_portlets"> 
     <div id="1-1_portlet"> 
     1-1 Portlet 
     </div> 

     <div id="1-2_portlet"> 
     1-2 Portlet 
     </div> 

     <div id="1-3_portlet"> 
     1-3 Portlet 
     </div> 
    </div> 

    <div id="middle_portlets"> 
     <div id="2-1_portlet"> 
     2-1 Portlet 
     </div> 

     <div id="2-2_portlet"> 
     2-2 Portlet 
     </div> 

     <div id="2-3_portlet"> 
     2-3 Portlet 
     </div>  
    </div> 

    <div id="right_portlets"> 
     <div id="3-1_portlet"> 
     3-1 Portlet 
     </div> 

     <div id="3-2_portlet"> 
     3-2 Portlet 
     </div> 

     <div id="3-3_portlet"> 
     3-3 Portlet 
     </div> 
    </div> 
    </div> 

</body> 
</html>

источник

2013-03-04 Donavon Lerman

ответ

0

Это граница вызывает проблему, поскольку это добавляет к размеру окна (75% + 2px, 1px для каждой стороны). Вы можете включать в себя следующее:

#left_heading,#right_heading,[anything else %-width and has borders] { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
}

Это исправит это за счет того, коробка соответствует ширине запрещенному включая границы, но обратите внимание, он будет работать только для IE8 + (и, очевидно, совместимые со стандартом). IE7 - вам нужно будет указать some crazy shim. Это хорошая политика для apply to everything, так как это сэкономит много головных болей с CSS на элементах блока.

Что-то еще, что вы, возможно, захотите рассмотреть, это использовать display:inline-block;, а не плавает. Это относится к той же области, что и box-sizing:border-box; (применимо только к IE8 +, однако есть резервная копия IE7 zoom:1; *display:inline;, которая работает одинаково), однако в будущем она создаст гораздо больше возможностей настройки. Что делать, если вы добавили новый заголовок? Теперь вам нужно изменить свои ширины и ваши поплавки ... но если все будет встроенным блоком, вы можете просто изменить ширину, и вы золотой. Вы также можете назначить отображение в одном объявлении класса, а не разные поплавки для разных мест размещения предметов.

Просто пища для размышления.

источник

2013-03-04 23:11:40 PlantTheIdea

+0

http://paulirish.com/2012/box-sizing-border-box-ftw/ –

+1

Спасибо, я искал эту статью, но не смог ее найти. Я добавлю это к своему ответу. – PlantTheIdea

0

Удалите границы (то есть на 100%) и поплавайте также средние квадраты.

После того, как вы делаете, что все они попадают на место ...

источник

2013-03-04 23:11:42

0

Вопрос Ваше использование пограничного стиля в сочетании с шириной, так как граница проходит по внешней стороне элемента.Поскольку объединенная ширина ваших элементов в строке составляет до 100%, применение границы заставляет ее настраивать, чтобы все элементы могли поместиться на странице.

источник

2013-03-04 23:14:17 theaccordance

0

, чтобы решить вашу проблему, вы должны удалить border, потому что граница также повлиять на вашу ширину, имеющую 1px в right and left он стал для 2px эквивалентной 4px в два ящика, что причина, почему коробка не выравнивать, еще потому у вас уже есть 100% ширины и нет места для 4px.

сделать два DIV выравнивания вы должны устранить border или настроить width

#left_heading { 
      float:    left; 
      width:    75%; 
      text-align:   center; 
      margin:    0; 
      padding:   0; 
     } 

    #right_heading { 
     float:    right; 
     width:    25%; 
     text-align:   center; 
     margin:    0; 
     padding:   0; 
    }

источник

2013-03-05 01:12:55 jhunlio

Смежные вопросы

 Смежные вопросы