Основание - выравнивание вложенных элементов

Question

Основание - выравнивание вложенных элементов

0

Обучающий отзывчивый дизайн, а также основа Zurb.

2 внутренних divs, зеленый и красный, не реагируют. Текущий дизайн просто показывает, как они должны быть, на большом экране. Что нужно сделать, чтобы сделать это отзывчивым. Кроме того, я не уверен, что лучший способ показать красный div на меньших экранах.

HTML:

<div>
        <div class="row fullWidth">
            <div class="twelve columns banner">
              <div class="logo">
                   Median Solutions</div>
              <div class="settings">
                   Hello Admin &nbsp;&nbsp;|
                   &nbsp;&nbsp;<a>Change Password</a>
                   &nbsp;&nbsp;|&nbsp;&nbsp;<a>Logout</a>
              </div>                    
            </div>
        </div>
    </div>

CSS:

*
{
    margin:0;
    padding:0;
}
.fullWidth
{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}
.banner
{
    background:lightgray;
    height:60px;
}
.logo
{
    color:White;
    font-size:20px; 
    line-height:60px;    
    width:190px;
    border:1px solid green;
    float:left;   
}
.settings
{
    float:right;
    line-height:60px;
    color:White;
    width:310px;
    border:1px solid red;
}
 @media all and (max-width: 510px) 
 {
  .banner{height:auto; text-align:center;}
  .settings,
  .logo{float:none; display:inline-block;}
 }

РЕДАКТИРОВАТЬ:

теперь выглядит с определенной шириной:

Ruby 22 март 2014, в 13:24

Источник

1

лучшее решение: замените его на маленьких экранах выпадающим
Adrian Preuss 22 март 2014, в 11:55
0

Какую версию Foundation вы используете? Как классы сетки отличаются в последней версии.
Ben Crook 22 март 2014, в 23:29

Теги:

html

zurb-foundation

css

responsive-design

1 ответ

Ещё вопросы

лучшее решение: замените его на маленьких экранах выпадающим
Какую версию Foundation вы используете? Как классы сетки отличаются в последней версии.

MarioD · Answer 1 · 2014-03-22T09-31-00.000Z

0

Как сказал Адриан, выпадающее меню было бы лучше, но вы также можете это сделать:

http://jsfiddle.net/CA669/1314/

@media all and (max-width: 510px) {
    .banner{height:auto; text-align:center;}
    .settings,
    .logo{float:none; display:inline-block;}
}

MarioD 22 март 2014, в 09:31

0

Я обновил снимок того, что он выглядит сейчас на определенную длину. Не думаю, что это отзывчиво, не так ли? Два div'а также должны иметь базовые классы, такие как row / column, это то, что я думаю ... но не знаете как?
Ruby 22 март 2014, в 12:15
0

Если вы добавите мой медиа-запрос внизу вашего CSS-файла, это должно решить вашу проблему.
MarioD 22 март 2014, в 12:19
0

его там, как предложено.
Ruby 22 март 2014, в 12:29
0

Похоже, что стили не применяются, возможно, вам придется нацелиться на классы глубже. Есть ли способ вы могли бы опубликовать еще немного кода?
MarioD 22 март 2014, в 12:31
0

Infact, это весь код, который у меня есть. Просто начал страницу. Так что это все, что есть ... Другая часть рисунка была тестом, и ее сейчас нет. Используете ли вы фонд. Если вы попробуете код в браузере, вы увидите, что это не очень хорошо выглядит
Ruby 22 март 2014, в 12:31

Показать ещё 3 комментария