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

Question

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

0

Я ищу способ создать веб-страницу, которая содержит два divs один ниже другого в левой стороне и один более широкий 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>

Andrus 13 март 2014, в 18:55

Источник

0

Возможно, вы могли бы опубликовать свой HTML / CSS и т. Д. В JSFiddle?
Paulie_D 13 март 2014, в 17:04

Теги:

html

css

html5

jquery-ui

1 ответ

Ещё вопросы

Возможно, вы могли бы опубликовать свой HTML / CSS и т. Д. В JSFiddle?

Ruslan Zhomir · Accepted Answer · 2014-03-13T16-09-00.000Z

попробуй это:

<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;

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

Другой способ - использовать таблицы или элементы со стилем "display: table-cell"

Спасибо. Это сработало. Я удалил высоты из стилей, так как они могут отличаться. Высота правой стороны баннера больше, чем левой стороны на две коробки высотой. Как отцентрировать левые ящики по вертикали? Я добавил vertical-align: middle к .leftside style , но поля по-прежнему начинаются сразу из верхнего корнета, не выровненного.
Попробуйте добавить display: table-cell в .leftside . Это заставит левый блок вести себя как ячейка таблицы, которая может центрировать по вертикали его содержимое. Другие стили отображения не поддерживают вертикальное выравнивание его содержимого