Css 如何创建左侧两个框和右侧一个框的布局_Css_Html_Jquery Ui

Css 如何创建左侧两个框和右侧一个框的布局

css html jquery-ui

Css 如何创建左侧两个框和右侧一个框的布局,css,html,jquery-ui,Css,Html,Jquery Ui,我正在寻找一种创建网页的方法，该网页包含两个div，一个在左侧下方，另一个在右侧较宽的div： +--------------------+------------------------------------+ | | | | img1 | | | |

我正在寻找一种创建网页的方法，该网页包含两个div，一个在左侧下方，另一个在右侧较宽的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>


.网站头条{
显示：内联块；
垂直对齐：中间对齐；
}
斯里德斯先生{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
列表样式：无；
溢出：隐藏；
填充：0；
保证金：0；
}
李先生{
-webkit背面可见性：隐藏；
位置：绝对位置；
显示：无；/*宽度：100%*/
左：0；
排名：0；
}
李：第一个孩子{
位置：相对位置；
显示：内联块；
浮动：左；
}
.rslides img{
显示：内联块；
浮动：左；
边界：0；
}
登录
或登记

试试这个：

<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:table cell”样式的表或元素

也许您可以在JSFIDLE中发布HTML/CSS等？谢谢。成功了。我从样式中删除了高度，因为这些样式可能会有所不同。右侧横幅的高度大于左侧两个框的高度。如何使左框垂直居中？我在

中添加了垂直对齐：中间对齐
。左侧样式

，但方框仍然是从上方左侧角开始的，没有对齐。请尝试将

显示：表格单元格

添加到

。左侧对齐

。这将迫使左框的行为类似于表格单元格，它可以垂直居中显示其内容。其他显示样式不支持其内容的垂直对齐

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