1. дома
  2. Вопрос и ответ
  3. Возможно ли вертикально выровнять различные текущие относительные или статические позиционированные элементы внутри флюида?

Возможно ли вертикально выровнять различные текущие относительные или статические позиционированные элементы внутри флюида?

2014-01-27 2 views
0

У меня есть такой код:Возможно ли вертикально выровнять различные текущие относительные или статические позиционированные элементы внутри флюида?

<div id="virtual-studio" class="banner-box"> 

    <a href="some_url" target="_blank"> 
     <img src="some.png" alt="some_alt" class="logo"> 
    </a> 

    <div class="banner-text"> 
     <img src="some.png" alt="" /> 
    </div> 

    <a href="some_url" target="_blank" class="see-more-button"> 
     <img src="some.png" alt="some_alt" /> 
    </a> 

</div>

и здесь стили к этому знамени коробки:

.banner-box { 
    display: inline-block; 
    width: 26%; 
    max-width: 26%; 
    min-height: 100%; 
    max-height: 100%; 
    height: 100%; 
    margin: 0 auto; 
} 

.banner-box a { 
    display: block; 
    clear: both; 
    width: 100%; 
    top: 0; 
    margin: 0 auto; 
    padding: 0; 
} 

.logo { 
    position: relative; 
    display: block; 
    clear: both; 
    margin: 0 auto; 
}  

.banner-text { 
    display: block; 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
} 

.banner-text img { 
    position: relative; 
    display: block; 
    clear: both; 
    margin: 0 auto; 
} 

.see-more-button { 
    display: block; 
    clear: both; 
    width: 100%; 
    bottom: 0; 
    margin: 0 auto; 
    padding: 0; 
} 

.see-more-button img { 
    position: relative; 
    display: block; 
    clear: both; 
    margin: 0 auto; 
}

Есть три таких коробки, выровнены по горизонтали - левый, средний, правый - и они 'внутри коробки большего размера с именем #content, который находится в другой коробке с именем #container.

Весь мой макет должен быть 100% -ной жидкостью - я не использовал пиксели нигде - просто проценты.

Я хотел бы структурировать эти три изображения, чтобы они были выровнены по вертикали внутри коробки, в стиле «верхний-средний-нижний», но без необходимости фиксировать хотя бы один элемент фиксированного размера.

Каждый элемент в макете должен иметь процентный размер. Также изображения, которые я использую, должны быть текучими.

Вот весь .html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
     <meta name="HandheldFriendly" content="True"> 
     <meta name="MobileOptimized" content="320"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css"> 

    </head> 

    <body> 

     <div id="wrapper"> 

      <div id="header"> 

       <div> 
        <img src="some.png" alt="some-alt" /> 
       </div> 

      </div> 

      <div id="container"> 

       <div id="content"> 

        <div id="virtual-studio" class="banner-box"> 

         <a href="some-url.com" target="_blank"> 
          <img src="some.png" alt="some-alt" class="logo"> 
         </a> 

         <div class="banner-text"> 
          <img src="some.png" alt="some-alt" /> 
         </div> 

         <a href="some-url.com" target="_blank" class="see-more-button"> 
          <img src="some.png" alt="some-alt" /> 
         </a> 

        </div> 

        <div id="mu-interactive" class="banner-box"> 

         <a href="some-url.com" target="_blank"> 
          <img src="some.png" alt="some-alt" class="logo"> 
         </a> 

         <div class="banner-text"> 
          <img src="some.png" alt="some-alt" /> 
         </div> 

         <a href="some-url.com" target="_blank" class="see-more-button"> 
          <img src="some.png" alt="some-alt" /> 
         </a> 

        </div> 

        <div id="mu-animation" class="banner-box"> 

         <a href="some-url.com" target="_blank"> 
          <img src="some.png" alt="some-alt" class="logo"> 
         </a> 

         <div class="banner-text"> 
          <img src="some.png" alt="some-alt" /> 
         </div> 

         <a href="some-url.com" target="_blank" class="see-more-button"> 
          <img src="see-more.png" alt="some-alt" /> 
         </a> 

        </div> 

       </div> 

       <div id="shadows"> 
        <img src="shadows.png" alt="Shadows" /> 
       </div> 

      </div> 

      <div id="footer"> 

        <img src="footer-line.png" alt="Footer.png" /> 
        <div id="contact"> 
         <p><span>company</span> co.</p> 
         <p>mail: <span>contact&#64;mail&#46;com</span></p> 
        </div> 

      </div> 

     </div> 

    </body> 

</html>

и .css:

/*@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"); 
*/ 

/** { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    /*-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    /*box-sizing: border-box; /* Opera/IE 8+ */ 
/*}*/ 

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    /*-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%;*/ 
} 

body { 
    /*position: relative;*/ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    /*font-size: 15px;*/ 
    font: 1em 'Open Sans', Arial, Helvetica, sans-serif; 
    /*font: "Arial Black", Gadget, sans-serif;*/ 
} 

img { 
    max-width: 100%; 
    height: auto; 
    /*display: block; 
    clear: both; 
    position: relative; 
    margin: 0 auto;*/ 
} 

#wrapper { 
    position: absolute; 
    margin: 10% 15%; 
} 

#header { 
    /*position: relative;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    height: 24%; 
    margin: 0 auto; 
    padding: 0 auto; 
} 

#header div { 
    /*position: relative;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0 auto; 
} 

#header img { 
    position: relative; 
    display: block; 
    clear: both; 
    /*width: auto; 
    height: auto;*/ 
    margin: 0 auto; 
    /*left: 0; right: 0; bottom: 0;*/ 
} 

#container { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 70%; 
    margin: 0 auto; 
    padding: 7% 0 0 0; 
    text-align: center; 
} 

#content { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 85%; 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
} 

.banner-box { 
    /*position: relative;*/ 
    display: inline-block; 
    width: 26%; 
    max-width: 26%; 
    min-height: 100%; 
    max-height: 100%; 
    height: 100%; 
    margin: 0 auto; 
} 

.banner-box a { 
    /*position: relative;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    /*min-height: 50%; 
    height: 50%;*/ 
    top: 0; 
    margin: 0 auto; 
    padding: 0; 
} 

.logo { 
    position: relative; 
    /*display: inline-block;*/ 
    display: block; 
    clear: both; 
    /*width: 100%; 
    height: 100%;*/ 
    margin: 0 auto; 
    /*vertical-align: top;*/ 
} 

.logo:hover { 
    cursor: pointer; 
    height: auto; 
    width: auto; 
    transform:scale(1.1); 
    -ms-transform:scale(1.1); /* IE 9 */ 
    -moz-transform:scale(1.1); /* Firefox */ 
    -webkit-transform:scale(1.1); /* Safari and Chrome */ 
    -o-transform:scale(1.1); /* Opera */ 
}  

.banner-text { 
    /*position: relative;*/ 
    /*display: inline-block;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    /*height: 25%; 
    min-height: 25%;*/ 
    margin: 0 auto; 
    top: 50%; 
    /*padding: 5% 0; 
    /*font: 0/0 a; 
    vertical-align: middle;*/ 
} 

.banner-text img { 
    position: relative; 
    display: block; 
    clear: both; 
    margin: 0 auto; 
    /*vertical-align: middle;*/ 
} 

.see-more-button { 
    /*position: relative;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    /*height: 25%; 
    min-height: 25%;*/ 
    /*vertical-align: bottom;*/ 
    bottom: 0; 
    margin: 0 auto; 
    padding: 0; 
} 

.see-more-button img { 
    position: relative; 
    display: block; 
    clear: both; 
    /*width: 100%; 
    /*height: 100%;*/ 
    margin: 0 auto; 
    /*font: 0/0 a;*/ 
} 

#virtual-studio { 
    /*position: relative; 
    display: inline-block;*/ 
    float: left; 
    /*width: 290px; 
    margin: 0 auto;*//*margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0;*/ 
} 

/*#virtual-studio a { 

} 

#virtual-studio a img { 

}*/ 


/*#mu-interactive { 
    /*position: relative; 
    display: inline-block;*/ 
    /*float: left;*/ 
    /*width: 290px; 
    margin: 0 auto;*//*margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
}*/ 

/*#mu-interactive a { 

} 

#mu-interactive a img { 

}*/ 

#mu-animation { 
    /*position: relative; 
    display: inline-block;*/ 
    float: right; 
    /*width: 290px; 
    margin: 0 auto;*//*margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0;*/ 
} 
/* 
#mu-animation a { 

} 

#mu-animation a img { 

}/* 

/*#virtual-studio a img:hover, #mu-interactive a img:hover, #mu-animation a img:hover { 
    width: 101%; 
    height: 101%; 
}*/ 

#shadows { 
    /*position: relative;*/ 
    display: block; 
    clear: both; 
    width: 100%; 
    height: 10%; 
    margin: 0 auto; 
} 

#shadows img { 
    position: relative; 
    display: block; 
    clear: both; 
    margin: 0 auto; 
    width: 100%; 
    /*height: 100%;*/ 
    /*bottom: 15%;*/ 
    /*height: 100%; 
    top: 0; right: 0; left: 0;*/ 
} 

#footer { 
    position: relative; 
    display: block; 
    clear: both; 
    width: 100%; 
    height: auto; 
    margin: 0 auto; 
    padding: 0 0 0 0; 
    /*font-size: 1em;*/ 
    /*top: 0; right: 0; left: 0;*/ 
} 

#footer img { 
    position: relative; 
    display: block; 
    clear: both; 
    width: 95%; 
    /*height: auto;*/ 
    margin: 0 auto; 
    /*padding: 2% 0 0 0; 
    /*top: 0; right: 0; left: 0;*/ 
} 

#footer #contact { 
    position: relative; 
    margin: 1% 0 0 0; 
} 

#footer p { 
    display: block; 
    clear: both; 
    /*position: relative;*/ 
    margin: 0 auto; 
    color: #AFBEA5; 
    text-align: center; 
    width: auto; 
} 

#footer span { 
    font-weight: bold; 
    color: #BDC9AF; 
} 

@media only screen 
and (max-device-width: 320px) { 
    html { 
    background: url('some-background-320.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
} 

@media only screen 
and (min-device-width: 321px) 
and (max-device-width: 480px) { 
    html { 
    background: url('some-background-480.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
} 

@media only screen 
and (min-device-width: 481px) 
and (max-device-width: 768px) { 
    html { 
    background: url('some-background-768.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
} 

@media only screen 
and (min-device-width: 767px) 
and (max-device-width: 1024px) { 
    html { 
    background: url('some-background-1024.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
} 

@media only screen 
and (min-device-width: 1025px) 
and (max-device-width: 1680px) { 
    html { 
    background: url('some-background-1680.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
} 

@media only screen 
and (min-device-width: 1681px) { 
    html { 
    background: url('some-background-1920.png') no-repeat center center fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% 100%; 
    } 
}

Я попытался использовать позицию: абсолютная; или изменить на дисплей: table-cell;, но ничего не получалось - может быть, я сделал ошибку где-то, при попытке это ..

При размещении изображения в абсолют, они рухнули из собственных контейнеров и даже от # баннерной коробки контейнера

Моя основная проблема заключается в том, что я не знаю, как заставить каждый элемент страницы вести себя как фиксированный размер, но все еще описывается через проценты. И, как структурировать этот контейнер # баннерной коробки, чтобы он растянулся на #content 100% высоты, а затем выровняйте эти изображения по вертикали внутри # banner-box.

Я бы предпочел не использовать линию JS, без фреймворков и основывать свой макет на 100% по процентам, поэтому я и ломаю голову над этой проблемой. Я бы хотел использовать только XHTML/CSS2 или HTML5/CSS3, но чтобы этот сайт работал на IE8 + и современных браузерах.

Но если не будет никакой возможности использовать даже пиксель, какой размер сетки (фиксированный размер сайта, а не сетка, например, Bootstrap .etc), был бы лучше для меня? 960px или 1024px?

Приветствия и извините, если мой простой & глупый (возможно), но для меня жесткий, проблема раздражает вас.

источник

2014-01-27 spaffy

+0

tl: dr, есть демо для нас? –

+0

Обычно у вас будет больше шансов получить ответы, которые вы ищете, и ускорить их, сделав код коротким и точным. Попробуйте удалить любой код, который напрямую не участвует в той части, где возникла ваша проблема, или попробуйте сделать упрощенный аналогичный код, который проявляет ту же проблему для вас. – Joeytje50

+0

Абсолютные контейнеры * вне потока нормального содержимого *, похожие на поплавки, поэтому неудивительно, что они рушится. Вы можете не использовать JS, но вам в значительной степени придется центрировать вертикально. В CSS нет надежного способа, если вы не ограничиваете его заранее определенными ограничениями. Кроме того, ** скопируйте соответствующий код в jsfiddle, чтобы люди могли настроить ваш код !!! *** –

ответ

0

Я рекомендую вам прочитать этот учебник: http://tinyurl.com/qb6q78o

В частности, пример Tuscany Luxury Resorts, которые вы можете проверить жить здесь: http://cameronmoll.com/projects/book/

Это дизайн полностью жидкость, в том числе изображений.Я запрограммировал свою версию за пару дней, имея только 10-дневный опыт работы в CSS.

источник

2014-01-28 08:53:30

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

  • Нет связанных вопросов^_^