Как выложить HTML-divs относительно друг друга, как Android RelativeLayout?

Я хотел бы выложить HTML-divs относительно друг друга, например Android's RelativeLayout.Как выложить HTML-divs относительно друг друга, как Android RelativeLayout?

Любая идея, как ее достичь? Благодарю.

EDIT: Вопрос является общим, но я вижу, что люди запрашивают конкретный пример, поэтому вот один из ссылок. Вы можете упростить пример требования к макету: синий квадрат от начала до конца. Под ним два квадрата: красный и желтый. Желтый справа от красного до конца. Под желтым, зеленый квадрат выровнен справа. Всего 4 divs, расположенных относительно друг друга.

enter image description here

источник

2015-05-25 AlikElzin-kilaka

Можете ли вы показать, что вы пробовали до сих пор? – Nitesh

Можете ли вы представить иллюстрацию макета, который вы хотите достичь? –

Добавил пример из ссылки и написал упрощенное требование. –

Как Android, в HTML вы не можете напрямую определить линейный или Relative Layout. Но через CSS вы можете определить любой дизайн, который вы хотите.

Например, в вашем вопросе вы запросили четыре входа для выравнивания в определенном формате.

Вы можете обернуть все входы в div и выровнять его с помощью float.

The layout is here.

Edit: Here является макет с .div2_2 стоимости рх.

Вы можете достичь этого макета, используя следующие html и css.

HTML

<div class="parent"> 
    <div class="div1"> 
      <input type="text" placeholder="Reminder Name"/> 
    </div> 
    <div class="div2"> 
     <div class="div2_1"> 
      <input type="text" value="Wed, Jun 27, 2012"/> 
     </div> 
     <div class="div2_2"> 
      <input type="text" value="8.00am"/> 
     </div> 
    </div> 
    <div class="div3"> 
     <div class="div3_1"> 
      <input type="button" value="Done"/> 
     </div> 
    </div> 
</div>

CSS

div{ 
    padding: 3px 0; 
} 
input { 
    width: 100%; 
} 
.parent{ 
    width: 400px; 
} 
.div1, .div2, .div3{ 
    width: 100%; 
} 
.div2{ 
    display: inline-block; 
} 
.div2_1, .div2_2{ 
    display: inline-block; 
} 
.div2_1{ 
    width: 55%; 
    float: left; 
} 
.div2_2{ 
    width: 44%; 
    float: right; 
} 
.div3_1{ 
    width: 30%; 
    display: inline-block; 
    float: right; 
}

Я надеюсь, что это будет полезно для вас.

источник

2015-05-25 13:03:44 sasi

Если я изменяю 'div2_1' на абсолютную ширину в пикселях, все рушится, потому что' div2_2' не определено справа от 'div2_1'. См. Изменение на пиксели здесь: http://plnkr.co/edit/I5Lk65ekR97KC2mclemn?p=preview. –

Если вы измените ширину в px на .div2_2, вам нужно добавить .div2 {display: inline-block} – sasi

Вы можете поместить divs на одну и ту же строку, используя свойство display в CSS.

Использование

display: inline;

или

display: inline-block;

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

источник

2015-05-25 13:03:46 khopsickle

Найден способ, используя float и clear:

<!DOCTYPE html> 
<html> 
<body> 
    <div style="width: 100%; height: 50px; background-color: blue;"></div> 
    <div style="width: 60%; height: 50px; background-color: red; float: left"></div> 
    <div style="width: 40%; height: 50px; background-color: yellow; float: left"></div> 
    <div style="width: 40%; height: 50px; background-color: green; clear:left; float: right"> 
</body> 
</html>

Вы можете играть с кодом here.

* Цель clear:left - сохранить зеленый цвет в следующей строке - даже если размеры красного и желтого цветов будут изменены на пиксели вместо процента.

enter image description here

источник

2015-05-25 15:28:00

Попробуйте потерять 'float: left'. Удивите себя. –

Вот еще одна версия, которая позиционирует зеленый цвет под желтым цветом: http://plnkr.co/edit/c0JrLSSkAvpyWyhgkfCU?p=preview –

Во всяком случае, это, как и любое другое решение здесь до сих пор, отстой! Ничто не сравнится с другим. Все постоянно! –

Заканчивать эту страницу, чтобы узнать, как макет вашего веб-страницы в «Grid System»

getbootstrap.com/css

источник

2017-03-01 16:43:49 BossmanT

Хотя ссылка может быть полезна, попробуйте включить важную информацию в свой ответ. – mhatch

Как выложить HTML-divs относительно друг друга, как Android RelativeLayout?

ответ

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