Akh*_*hil 52 html css layout position
我正在创建一个横向分为三个部门的示例网站.我希望最左边的div为25%宽度,中间一个为50%宽度,右边为25%宽度,以便分区水平填充所有100%空间.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
当我执行此代码时,div显示在彼此之上.我希望他们出现在彼此旁边!
我怎样才能做到这一点？
Jez*_*mas 33
我不会为这类事情使用花车; 我宁愿用inline-block.
还有一些要考虑的要点:
<head>和<body>doctype这是格式化文档的更好方法:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
这里有一个的jsfiddle的好办法.
Maa*_*eeb 22
我知道这是一个非常古老的问题.只是在这里发布,因为我使用FlexBox解决了这个问题.这是解决方案
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>只需添加display:flex到容器!不需要花车.
Pau*_*ann 14
你可以像这样使用浮动元素:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
注意溢出:隐藏; 在父容器上,这是为了使父元素与子元素具有相同的尺寸(否则它的高度为0).
Fai*_*nna 11
最简单的方法
我可以看到这个问题得到了解答,我正在为将来有这个问题的人提供这个答案
编写内联css以及所有内部div的ID都不是很好的做法,总是尝试使用类进行样式化.如果你想成为一名专业的网页设计师,使用内联css是一种非常糟糕的做法.
在你的问题中,我已经为父div提供了一个包装类,所有内部div都是css中的子div,你可以使用nth-child选择器调用内部div .
我想在这里指出一些事情
1 - 不要使用内联css(这是非常糟糕的做法)
2 - 尝试使用类而不是id,因为如果你给一个id,你只能使用它一次,但是如果你使用一个类,你可以多次使用它,你也可以使用该类来设置它们的样式,这样你就可以编写更少的代码.
codepen链接我的回答
https://codepen.io/feizel/pen/JELGyB
.wrapper{width:100%;}
.box{float:left; height:100px;}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我正在寻找相同的答案,此时xUnit文档在如何实现类夹具和集合夹具方面非常有用,这些夹具和集合夹具为开发人员提供了类或类级别的各种设置/拆卸功能.这与Geir Sagberg的答案一致,并提供了良好的骨架实现来说明它应该是什么样子.
https://xunit.github.io/docs/shared-context.html
集合夹具何时使用:当您想要创建单个测试上下文并在多个测试类中的测试之间共享它时,并在测试类中的所有测试完成后将其清理干净.
有时您会想要在多个测试类之间共享一个fixture对象.用于类fixtures的数据库示例是一个很好的示例:您可能希望使用一组测试数据初始化数据库,然后将该测试数据保留在原地以供多个测试类使用.您可以使用xUnit.net的集合夹具功能在多个测试类中的测试之间共享单个对象实例.
要使用集合装置,您需要执行以下步骤:
创建fixture类,并将启动代码放在fixture类构造函数中.如果fixture类需要执行清理,则在fixture类上实现IDisposable,并将清理代码放在Dispose()方法中.创建集合定义类,使用[CollectionDefinition]属性对其进行装饰,为其指定一个用于标识测试集合的唯一名称.将ICollectionFixture <>添加到集合定义类.使用您为测试集合定义类的[CollectionDefinition]属性提供的唯一名称,将[Collection]属性添加到将成为集合一部分的所有测试类中.如果测试类需要访问fixture实例,请将其添加为构造函数参数,并自动提供.这是一个简单的例子:
.wrapper{width:100%;}
.box{float:left; height:100px;}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
Run Code Online (Sandbox Code Playgroud)
xUnit.net以类固件的大致相同的方式处理集合装置,除了集合装置对象的生命周期更长:它是在集合中的任何测试类中运行任何测试之前创建的,并且不会被清除直到集合中的所有测试类都运行完毕.
测试集合也可以使用IClassFixture <>进行修饰.xUnit.net将此视为测试集合中的每个单独测试类都使用类fixture进行修饰.
测试集合还会影响xUnit.net在并行运行测试时运行测试的方式.有关更多信息,请参阅并行运行测试.
重要提示:夹具必须与使用它们的测试位于同一装配中.
您添加一个
float: left;
Run Code Online (Sandbox Code Playgroud)
调整3个元素的样式，并确保父容器具有
overflow: hidden; position: relative;
Run Code Online (Sandbox Code Playgroud)
这样可以确保浮标占用实际空间。
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
另外请注意，需要从容器中移除宽度：100％和高度：100％，否则第三块将缠绕到第二行。