Как создать макет с двумя ящиками с левой стороны и один ящик с правой стороны

Я ищу способ создать веб-страницу, которая содержит два дивы один ниже другого в левой стороне и один широкий DIV в правой части:Как создать макет с двумя ящиками с левой стороны и один ящик с правой стороны

+--------------------+------------------------------------+ 
|     |         | 
|  img1  |         | 
|     |         | 
+--------------------+    img2 centered   | 
| logon or register |         | 
|  Search  |         | 
|     |         | 
+--------------------+------------------------------------+

Я пробовал код ниже, но он отображает img1 и logon div в одной строке.

Это главная страница карты торговых карт ASP.NET MVC4, которая установлена на разных сайтах.

Некоторые клиенты хотят, чтобы все эти 3 коробки были в той же строке, что и в коде ниже. Если разумные эти два макета должны легко переключаться с помощью переопределения стиля на главной странице или каким-либо другим простым способом.

Как это реализовать? Используется jquery ui и ответственные слайды.

<!DOCTYPE html> 
<style> 
.site-topbanner { 
    display: inline-block; 
    vertical-align: middle; 
} 

.rslides { 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
} 

    .rslides li { 
     -webkit-backface-visibility: hidden; 
     position: absolute; 
     display: none; /*width: 100%;*/ 
     left: 0; 
     top: 0; 
    } 

     .rslides li:first-child { 
      position: relative; 
      display: inline-block; 
      float: left; 
     } 

    .rslides img { 
     display: inline-block; 
     float: left; 
     border: 0; 
    } 

</style> 

<body> 
    <div id="container"> 
    <div style="margin: 0"> 
     <div class="site-topbar"> 
      <div class='site-topbanner'> 
      <a><img id='img1' width="175px" height="60px"/></a> 
      </div> 

     <div class='site-topbanner'> 
      <div> 
       <a>Logon</a> 
       or <a>Register</a> 
      </div> 
     <form ><input /><input class="searchbutton" type="submit" value="Search" /> 
</form> 
     </div> 
     <ul class="rslides"> 
      <li> 
       <a> 

<img id='img2' width="375px" height="60px" /> 

</a> 
      </li> 

     </ul> 

     </div> 
</div> 
</div> 
</body>

источник

2014-03-13 Andrus

Может быть, вы могли бы разместить свой HTML/CSS т.д., в JSFiddle? –

попробовать это:

<style> 
.leftside{ float: left; width:175px; } /* you can use any other width you want*/ 
.rightside{ text-align: center; margin-left:175px } /* you may add 10px more to left margin to step off from left side*/ 
</style> 
<body> 
    <div id="container"> 
    <div style="margin: 0"> 
     <div class="leftside"> 
     <a><img id='img1' width="175px" height="60px"/></a> 
     <div> 
      <a>Logon</a> 
      or <a>Register</a> 
      <form ><input /><input class="searchbutton" type="submit" value="Search" /> </form> 
     </div> 
     </div> 
     <div class="rightside"> 
     <li> 
      <a> 
      <img id='img2' width="375px" height="60px" /> 
      </a> 
     </li> 
     </div> 
    </div> 
    </div> 
</body>

стиль Вы писали:

display: inline-block; 
vertical-align: middle;

не повлияет на вертикальное размещение вашего значительно изображения - это актуально для объектов размером сравнимых с высотой текстовой строки только. Таким образом, неплохо было бы остановиться на высоте ваших ящиков, а затем написать соответствующие стили.

Другой способ заключается в использовании таблиц или элементов с «дисплей: стол-клетка» стиль

источник

2014-03-13 17:19:12

Спасибо. Это сработало. Я удалял высоты из стилей, поскольку они могут различаться. Высота правого бокового знака больше, чем левая сторона. Как центрировать левые прямоугольники вертикально? Я добавил 'vertical-align: middle' в '.leftside style', но ящики по-прежнему начинаются сразу из uppler left cornet, не выравниваются. – Andrus

Попробуйте добавить 'display: table-cell' в' .leftside'. Это заставит левую ячейку вести себя как ячейка таблицы, которая может центрировать вертикально содержимое. Другие стили отображения не поддерживают вертикальное выравнивание содержимого –

Как создать макет с двумя ящиками с левой стороны и один ящик с правой стороны

ответ

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