我正在寻找一种创建网页的方法，该网页包含两个 div，一个在左侧下方，另一个在右侧，一个较宽的 div:
+--------------------+------------------------------------+
| | |
| img1 | |
| | |
+--------------------+ img2 centered |
| logon or register | |
| Search | |
| | |
+--------------------+------------------------------------+
我尝试了下面的代码，但它在同一行中呈现 img1 和登录 div。
这是安装在不同站点的 ASP.NET MVC4 购物卡母版页。
有些客户希望所有这 3 个框都在同一行中，如下面的代码所示。 如果合理的话，应该使用母版页中的样式覆盖或其他一些简单的方式轻松切换这两种布局。
如何实现？ 使用 jquery ui 和 responsible-slides。
<!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>
最佳答案
试试这个:
<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”样式的表格或元素
关于css - 如何创建左侧两个框和右侧一个框的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22385722/