устанавливающиеся дивы horizantally в HTMLwith различного содержания

У меня есть заголовок с тремя дивами, примерустанавливающиеся дивы horizantally в HTMLwith различного содержания

<header class="main">  
     <div class="logo-image"> 
      <image src="images/small_logo.jpg" alt="Logo"> 
     </div> 
     <div class="selectoption"> 
      <ul> 
       <li><a href="">HOME</a></li> 
       <li><a href="">| MY ACCOUNT</a></li>     
       <li><a href="">| MY WISHLIST</a></li> 
       <li><a href="">| MY CART</a></li>    
       <li><a href="">| CHECKOUT</a></li> 
       <li><a href="">| LOGIN</a></li> 
      </ul> 
     </div> 
     <div class="choose"> 
      <select id ="Currency"> 
       <option value="US dollar">US Dollar - USD</option> 
       <option value="Singapore Dollar">Sing Dollar - SGD</option> 
       <option value="Indian Rupee">Indian Rupees - INR</option>   
      </select>    
      <input type="text" placeholder ="Search entire store" required>    
     </div> 
    </header>

Я хочу, чтобы изображение, список и валюту, чтобы оказаться в одной строке, заголовок HTML. Я пробовал с float: левый и некоторые другие способы, предлагаемые людьми, но ничего не работает.

Одним из способов было бы сделать изображение и валюту также дочерними элементами элемента ul, но я предполагаю, что это не правильный путь?

Любые предложения

источник

2015-04-13 Megha

ли они в настоящее время сидите под eacother? Что вы видите? – lejimmie

Добавьте скрипку с проблемой, чтобы мы могли помочь. –

Нет, в настоящее время они не сидят под друг другом. Изображение слева от него больше, чем внизу. список и немного выше списка справа - это cur rency – Megha

Вы можете легко добиться того, что с небольшой начальной загрузки. Используйте grid system в ваших интересах.

Поместите DIV вокруг 3 Див как что:

<div class="col-md-4"></div>

Вы можете найти дополнительную информацию о ссылке я говорил.

Подсказка: Вы можете сделать свой сайт мобильным с несколькими div.

источник

2015-04-13 14:10:30 greenhoorn

Позвольте мне попробовать это сегодня и посмотреть, помогает ли это – Megha

Привет, greenhoom ... нет способа сделать это только через CSS .. Я пробовал обернуть все divs под один div, но он, похоже, не работает. – Megha

Bootstrap - это CSS (и содержит также javascript). Вы включили файлы начальной загрузки, необходимые для этого? – greenhoorn

То, что я наконец-то сделал, чтобы использовать классы начальной загрузки "Pull-вправо", "тянуть-центр" и тянуть налево», чтобы достичь этого

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">   
</head> 
<body> 
    <div class="logo"> 
     <div class="pull-left"> 
      <image src="images/small_logo.jpg"> 
     </div> 
     <div class="pull-center"> 
      <ul class="list-inline"> 
       <li><a href="">HOME</a></li> 
       <li><a href="">| MY ACCOUNT</a></li>     
       <li><a href="">| MY WISHLIST</a></li> 
       <li><a href="">| MY CART</a></li>    
       <li><a href="">| CHECKOUT</a></li> 
       <li><a href="">| LOGIN</a></li> 
      </ul> 
     </div> 
     <div class="pull-right"> 
      <select id ="Currency"> 
       <option value="US dollar">US Dollar - USD</option> 
       <option value="Singapore Dollar">Sing Dollar - SGD</option> 
       <option value="Indian Rupee">Indian Rupees - INR</option>   
      </select>    
      <input type="text" placeholder ="Search entire store" required>  
     </div>   
    </div> 
</body>

источник

2015-05-14 08:38:46 Megha

устанавливающиеся дивы horizantally в HTMLwith различного содержания

ответ

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