Html & Css - Изменение гравитации

Я строю сайт, где элементы действительно только внизу. Я хочу, чтобы мое вертикальное стартовое место начиналось внизу, а не сверху, и я хочу сделать это, не выведя эти элементы из нормального потока страницы (поэтому нет абсолютного позиционирования), так что положение одного элемента может зависеть на позиции другого. Как это сделать? Вот визуальное объяснение понятия «элементы внизу». http://imgur.com/YrzkQfi Html & Css - Изменение гравитации

<head> 
    <style> 
     body { 
      background: url('Index-Background.jpg') no-repeat center center fixed; 
      background-size: cover; 
     } 
     section { 
      margin-left: 2%; 
     } 
     nav { 
      margin-bottom: 6.66%; 
     } 
    </style> 
</head> 
<body> 
    <main> 
     <section> 
      <h1>The Great Composers</h1> 
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div> 
     </section> 
     <nav> 
      <ul> 
       <li><a href="#0">Gershwin</a></li> 
       <li><a href="#0">Debussy</a></li> 
      </ul> 
     </nav> 
    </main> 
</body>

источник

2016-06-21 Oli

вы могли бы объяснить, что вы имеете в виду под «Я строю сайт, где элементы являются действительно только на дне.»? – derp

http://imgur.com/YrzkQfi – Oli

Он просто хочет, чтобы его сайт следил за гравитацией. Что он подразумевает под этим, так это то, что элементы должны автоматически выравниваться снизу вверх, а не нормальное поведение, которое сверху вниз –

Ну, есть некоторые обходные пути. Вы можете сделать что-то вроде этого,

html, body { 
    height: 100%; 
} 
body { 
    display: table; 
} 
main { 
    display: table-cell; 
    vertical-align: bottom; 
}

Смотрите рабочий пример: https://jsfiddle.net/L1w9m3mz/

источник

2016-06-21 06:18:29

Попробуйте изменить section и nav заказы

<nav> 
    <ul> 
     <li><a href="#0">Gershwin</a></li> 
     <li><a href="#0">Debussy</a></li> 
    </ul> 
</nav> 
<section> 
    <h1>The Great Composers</h1> 
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div> 
</section>

источник

2016-06-21 04:02:33 OnlyNoiseOnWires

Попробуйте

html, body { 
     position: relative; 
    ... 
    } 
html { 
    position: relative; 
    ... 
    }

Edit: Это может помочь. How can I position my div at the bottom of its container?

источник

2016-06-21 04:08:22 anjali

Но как это могло бы сделать их внизу? – Oli

Что это такое? – anjali

@ Oli, пожалуйста, проверьте отредактированный ответ выше и дайте мне знать. – anjali

Хмм, я все еще не совсем уверен, чего вы хотите достичь, однако, если вы пытаетесь сделать навигационную панель горизонтальной. Вам нужно добавить следующий CSS:

li { 
    display: inline-block; 
    padding-right:10px; 
}

источник

2016-06-21 04:28:38 derp

Как об использовании position:fixed установить nav позиционирование. Вот что я заключил из прилагаемого изображения: JSFiddle

источник

2016-06-21 04:31:59

использование Flexbox - все современные браузеры поддерживают
добавить .reverse где вы хотите отменить.

http://caniuse.com/#search=flexbox

.reverse { 
    display: flex; 
    flex-direction: column-reverse; 
    }

источник

2016-06-21 06:31:38

Html & Css - Изменение гравитации

ответ

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