Использование div для позиционирования элементов на странице html

Я пытаюсь использовать <div> для управления относительным положением элементов моей страницы. Я хочу следующее:Использование div для позиционирования элементов на странице html

Header 1 
Some text A...         Data B 
Some text C... 

Header2 
Some text D...         Data E 
Some text F...

HTML-код я использую (без CSS) заключается в следующем:

<html> 
<head/> 
<body> 
    <div> 
    <h1>Header1</h1> 
    <div> 
     <div style="float: left; width: 70%"> 
     <p> 
      Some text A 
     </p> 
     </div> 
     <div> 
     Data B 
     </div> 
    </div> 
    <div style="float: left"> 
     Some text C... 
    </div> 
    </div> 
    <div> 
    <h1>Header2</h1> 
    <div> 
     <div style="float: left; width: 70%"> 
     <p> 
      Some text D... 
     </p> 
     </div> 
     <div> 
     Data E 
     </div> 
    </div> 
    <div style="float: left"> 
     <p> 
     Some text F... 
     </p> 
    </div> 
    </div> 
</body> 
</html>

Что я получаю что-то, что выглядит как

Header1 
Some text A...         Data B 
                Some text C... 
                Header2 
Some text D...         Data E 
                Some text F...

Как вам может видеть: «Некоторые тексты C ...», «Заголовок 2» и «Некоторые тексты F ...» не расположены там, где я их хотел бы. Я полагаю, что неправильно использую <div style="float: left">. Как мне это сделать?

источник

2016-12-12 fzd

Вы пробовали flexbox? –

Мне нужно найти другое решение из-за * старой * версии Firefox, развернутой на стороне клиента. – fzd

Используйте Flexbox модель

HTML:

<html> 
<head/> 
<body> 
    <div> 
    <h1>Header1</h1> 
    <div class='parent'> 
     <div style="float: left; width: 70%"> 
     <p> 
      Some text A 
     </p> 
     </div> 
     <div> 
     Data B 
     </div> 
    </div> 
    <div style="float: left"> 
     Some text C... 
    </div> 
    </div> 
    <div> 
    <h1>Header2</h1> 
    <div class='parent'> 
     <div style="float: left; width: 70%"> 
     <p> 
      Some text D... 
     </p> 
     </div> 
     <div> 
     Data E 
     </div> 
    </div> 
    <div style="float: left"> 
     <p> 
     Some text F... 
     </p> 
    </div> 
    </div> 
</body> 
</html>

CSS:

.parent{ 
    display : flex; 
    justify-content : space around; 
    flex-direction : row 
}

источник

2016-12-12 14:21:22

Работает отлично. Я новичок в html, я постараюсь понять принципы flexbox. Большое спасибо. – fzd

Из-за древней версии Firefox, развернутой на стороне клиента, мне нужно будет найти решение без flexbox – fzd

okay! спасибо за информацию, я предложу другое решение –

Непосредственным вопрос вы работаете в том, что оба Some text A и Some text D завернуты в <p> теги. Это добавляет к ним по умолчанию маржу по умолчанию, поэтому отбрасывается там, где вы ожидаете, что ваши поплавки произойдут.

Если вы посмотрите HTML-код через инструменты Chrome или Firefox, подсветка покажет вам, как этот маржа влияет на ваш поплавок.

Простым решением для этого является использование CSS для устранения полей на этих элементах.

Редактировать: Если вы решите пойти по маршруту Flexbox, то justify-content: space-between; может лучше соответствовать вашим потребностям.

источник

2016-12-12 14:30:48 TXChetG

Использование div для позиционирования элементов на странице html

ответ

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