2015-02-23 2 views
1

У меня есть часы в одном теге div и адресе в другом теге div. Я хочу показать часы в левой стороне и адрес на правой стороне. Теперь адрес отображается под часами.Как добавить css для тега div

<div class="new"> 
    <div class="clock"> 
    //my clock code 
    </div>  //end of clock div 
    <div class="address"> 
     <p> </p> //address 
    </div>  //end of address div 
</div>   //end of new div 

css 
    .new .clock{ 
    margin:0; 
    padding:10px 0px 0 0; 
    float:left; 
    } 
    .address{ 
    margin:0; 
    padding:30px 0px 50px 0px; 
    text-align:right; 
    } 
+1

плавающем ДИВ правильный адрес - http://jsfiddle.net/Paulie_D/54pqbh2e/ 2/ –

+0

Или просто использовать пролеты, если вы хотите, встроенные элементы так или иначе? – adeneo

ответ

1

для часов: float: left;

для адреса: float: right;

но если окно браузера становится слишком мало, они будут появляться друг под другом снова

1

просто добавить поплавок: левый к адрес также.

Выглядит немного странно с прокладкой однако

1

Попробуйте использовать следующий код

.clock { 
display:inline-block; 
width:40%; 

}

.address { 
    display:inline-block; 
    width:40%; 
} 

Вы можете Similary использовать поплавок, но вы должны дать родительский элемент а стиль, такой как

.clock { 
    float:left; 
} 

.address { 
    float:right; 
} 

.new{ clear:both; }

1

Я создал быструю скрипку here, чтобы показать пример того, как разместить 2 divs бок о бок.

Вот код CSS для него. Я добавил свойство float для каждого div и сделал их равными 40% от общей ширины страницы (может быть выше, если они не составляют более 100%).

.clock { 
     margin:0; 
     padding:10px 0px 0 0; 
     float:left; 
     width:40%; 
    } 
    .address { 
     margin:0; 
     padding:10px 0px 0 0; 
     text-align:right; 
     float:right; 
     width:40%; 
    } 
Смежные вопросы