H1 нажатие на вопрос DIV вниз вопрос

-2

Итак, в первую очередь, я знаю, что могу просто сделать position:absolute на H1 в этом сценарии и решить мою проблему. То, что я смотрю на это объяснение, почему происходит ниже сценарий, и еще больше жидкости путь вокруг него, что не связано с position:absoluteH1 нажатие на вопрос DIV вниз вопрос

урезанная простой пример поведения: JsFiddle

Н1 в внутренний div, кажется, заполняет всю ячейку и толкает кнопки справа вниз. Если я вытащу <h1> и просто использую <strong> или что-то еще, это прекрасно. Вы увидите, что у меня есть поля и отступы, установленные на 0

Я был бы признателен за то, что я узнал новый трюк, пока я сбиваю пыль с моего css. Благодаря!

источник

2015-04-19 Chris W.

Проверьте мой ответ, это быстрое решение :) –

О, и проголосовать без объяснения довольно бесполезно для ОП. Так что спасибо за это. это действительный вопрос SO, хотя ИМО. –

на ячейке сетки вам придется делать некоторые размеры коробки. дисплей: встроенный стол; вертикально-выровненный: сверху; – Chris

Вы используете table layout. Элементная ячейка h1 и ячейка кнопок находятся в одной и той же строке, поэтому они отображаются на одной и той же строке один за другим. Но я не понимал, что вас беспокоит вертикальное выравнивание.

Если вы хотите улучшить свои навыки, отметьте the flexbox layout.

источник

2015-04-19 02:35:10 Gael

Спасибо, вот что я хотел знать! Это имеет смысл. –

О, и я использую flex, но я не мог потерять границы желоба и, по общему признанию, выстрелил в нечто более знакомое, так как я делал xaml так долго, а не css. –

Это зависит от того, чего вы хотите достичь, но макет таблицы не помогает делать действительно жидкостные дисплеи. Как старые веб-страницы, созданные с помощью

. – Gael

Таким образом, он работает: https://jsfiddle.net/Marco_Bernardini/6aorkzso/6/

<div class="a-grid"> 
    <div class="a-grid-row"> 
     <div class="a-grid-cell"> 
      <h1 id="zot">Blah Blah Blah</h1> 
     </div> 
     <div class="a-grid-cell"> 
      <div class="a-grid-container"> 
       <div class="a-grid-row"> 
        <button>1</button> 
       </div> 
       <div class="a-grid-row"> 
        <button>2</button> 
       </div> 
       <div class="a-grid-row"> 
        <button>3</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS:

.a-grid-container { 
    display: table; 
    border-collapse: collapse; 
} 
.a-grid-row { 
    display: table-row; 
} 
.a-grid-cell { 
    display: table-cell; 
    vertical-align:top; 
    border: #f00 1px solid; 
    padding: 0; 
} 
#zot { 
    background-color: #cf0; 
    margin:0; 
    padding: 0; 
}

Я добавил background-color, чтобы увидеть границы h1 и vertical-align: top.

источник

2015-04-19 02:43:25

Круто спасибо, это еще один способ сделать это, но я тоже надеялся на объяснение. –

Обратите внимание, что в вашем коде нижняя часть 'h1' выровнена в нижней части первой кнопки. Будучи 'h1' выше, чем кнопка, он отбрасывает базовую линию. –

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