无法使用CSS创建三列
我很难调整内容。我正在尝试创建三列，我知道我可以使用bootstrap但是在此期间，我想像这样的网站做以下风格：
以下是css和html代码：
.img-banner {
margin-left: auto;
margin-right: auto;
display: inline;
}
body {
position: relative;
background-color: white;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: white;
text-decoration: none;
font-family: Sherwood !important;
}
h6 {
color: blue;
font-family: Trade Gothic LT Std !important;
}
.navbar-buttons {
padding-top: 20px;
padding-right: 20px;
text-align: right;
list-style: none;
margin: 0 auto;
overflow: hidden;
}
#wrapper {
width: 940px;
height: 100%;
margin: 0 auto;
}
#banner-wrapper {
display: block;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #FFF;
background-image: url(./img/Banner.jpg);
background-repeat: no-repeat;
padding-bottom: 83px;
}
#content-wrapper {
clear: both;
margin: 0;
padding: 0;
}
img.no-border {
border: 0;
}
.img-banner {
margin-left: auto;
margin-right: auto;
display: block;
}
#main {
float: left;
padding: 0;
width: 50%;
margin-left: 15px;
}
#sidebarleft {
width: 30%;
padding-top: 30px;
padding-right: 20px;
display: inline;
float: left;
}
#sidebarleft ul.menu {
list-style: none;
padding: 0;
margin: 10px 0 10px 0;
}
.leftbuttons1 {
background-image: url(./img/Button_1.jpg);
background-repeat: no-repeat;
padding: 5px 10px 10px;
}
.leftbuttons1 a {
color: grey;
font-size: 10pt !important
}
.leftbuttons {
background-image: url(./img/Button_1.jpg);
background-repeat: no-repeat;
padding: 5px 0 10px 10px;
}
.leftbuttons a {
color: grey;
font-size: 10pt !important;
}
.leftbuttons2 {
background-image: url(./img/Button_2.jpg);
background-repeat: no-repeat;
padding: 7px 0 10px 7px;
}
.leftbuttons2 a {
color: grey;
vertical-align: center;
font-size: 10pt !important;
}
#sidebarright {
float: right;
width: 30%;
padding: 0;
margin: 0;
padding-top: 20px;
}
#sidebarright a {
color: grey;
font-size: 10pt !important;
}
.rightbuttons {
background-image: url(./img/Button.jpg);
background-repeat: no-repeat;
padding: 14px 0 20px 11px;
text-decoration: none;
}
.rightbuttons2 {
background-image: url(./img/Resources_Button.jpg);
background-repeat: no-repeat;
padding: 14px 0 20px 11px;
}
.rightbuttonsAlert {
background-image: url(./img/Button.jpg);
background-repeat: no-repeat;
padding: 14px 0 20px 11px;
}
.rightbuttonsAlert a {
color: red !important;
}
.rightbuttonsDir {
background-image: url(./img/Button.jpg);
background-repeat: no-repeat;
padding: 14px 0 20px 11px;
}
img.buttonUlti {
float: right;
padding-top: 15px;
padding-bottom: 15px;
}
.shiftRes {
margin-left: 27px;
padding-top: 40px;
}
.departstyle {
font-size: 18px !important;
font-weight: bold;
padding-left: 10px;
margin: 0 0 7px 0;
}
.resstyle {
font-size: 18px !important;
font-weight: bold;
text-align: left;
padding-left: 15pt;
margin: 0 0 7px 0;
}<div id="wrapper">
<!-- banner-wrap starts here -->
<div id="banner-wrapper">
<!-- Menu Tabs -->
<ul>
<li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a> <span style="color:white !important">|</span> <a href="Resources.cfm"><span>Support</span></a>
</li>
</ul>
</div>
<div id="content-wrapper">
<div id="sidebarright">
<a href="#">
<img class="buttonUlti" src="img/UPro.jpg" alt="UPro" />
</a>
<table width="100%;">
<tbody>
<tr>
<th class="resstyle">Resources</th>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Form.cfm">Forms</a>
</td>
<td class="rightbuttons spacetd2"><a href="Postings.cfm">Postings</a>
</td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Locations.cfm">Locations</a>
</td>
<td class="rightbuttons spacetd"><a href="Comp.cfm">Comp</a>
</td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Care.cfm">Urgent Care</a>
</td>
<td class="rightbuttons spacetd"><a href="Photos.cfm">Event Photos</a>
</td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Safety.cfm">Education</a>
</td>
<td class="rightbuttonsDir spacetd"><a href="Directory.cfm"> Directory</a>
</td>
</tr>
<tr>
<td class="rightbuttonsAlert spacetd"><a href="Alerts.cfm">Alerts</a>
</td>
</tr>
</tbody>
</table>
</div>
<!---Body of Page--->
<div id="main">
<h6>Blah</h6>
<p></p>
</div>
<div id="sidebarleft">
<ul class="menu">
<li class="departstyle">Departments</li>
<li class="leftbuttons1"><a href="ClmResources_R.cfm">Claims</a>
</li>
<li class="leftbuttons"><a href="Credentialing.cfm?">Credentialing</a>
</li>
<li class="leftbuttons"><a href="Customer_Services.cfm">Customer Services</a>
</li>
<li class="leftbuttons"><a href="Data_Management.cfm">Data Management</a>
</li>
<li class="leftbuttons"><a href="Decision_Support.cfm">Decision Support</a>
</li>
<li class="leftbuttons"><a href="Employee_Services.cfm">Employee Services</a>
</li>
<li class="leftbuttons"><a href="Finance.cfm">Finance</a>
</li>
<li class="leftbuttons"><a href="HCC.cfm">HCC</a>
</li>
<li class="leftbuttons2"><a href="HSEC.cfm">Health System <br />Engagement and<br /> Contracting</a>
</li>
<li class="leftbuttons"><a href="Mail_Room.cfm" target="_blank">Mail Room</a>
</li>
<li class="leftbuttons"><a href="Marcom.cfm">Marcom</a>
</li>
<li class="leftbuttons"><a href="Medical_Management.cfm">Medical Management</a>
</li>
<li class="leftbuttons"><a href="Network_Management.cfm">Network Management</a>
</li>
<li class="leftbuttons"><a href="NextGen.cfm">NextGen</a>
</li>
<li class="leftbuttons"><a href="Operations.cfm">Operations</a>
</li>
<li class="leftbuttons"><a href="Physician_Resources.cfm">Physician Resources</a>
</li>
<li class="leftbuttons"><a href="Provider_Relations.cfm">Provider Relations</a>
</li>
<li class="leftbuttons"><a href="Quality_Management.cfm">Quality Management</a>
</li>
<li class="leftbuttons"><a href="Improvement.cfm">Improvement</a>
</li>
<li class="leftbuttons"><a href="Improvement.cfm"> Management</a>
</li>
</ul>
</div>
</div>
<!---Content-wrapper ends--->
更新
我已经完成了Flex盒子，但不确定我做错了什么。我按照提供的示例进行操作，但是我能够做到这一点，但是当我尝试调整填充时，它出错了我添加了与前面代码相同的结构来分隔列中的信息，但它不起作用。以下是我使用flexbox时的结果：
正如您所看到的，我无法获得链接的按钮图像，并且间距，边距和填充无处不在。
这是我的css代码和HTML代码。任何帮助将不胜感激，谢谢
CSS：
.img-banner{
margin-left:auto;
margin-right:auto;
display:inline;
}
img.no-border{border: 0;}
body{
position:relative;
background-color:white;
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
color: white;
text-decoration: none;
font-family: Sherwood !important;
}
h6{
color:blue;
font-family: Trade Gothic LT Std !important;
}
.navbar-buttons{
padding-top:20px;
padding-right:20px;
text-align:right;
list-style:none;
margin:0 auto;
overflow:hidden;
}
#wrapper {
width: 940px;
height:100%;
margin: 0 auto;
}
#banner-wrapper{
display:block;
padding:0;
margin-left:auto;
margin-right:auto;
background:#FFF;
background-image: url(./img/Banner.jpg);
background-repeat: no-repeat;
padding-bottom:83px;
}
#content-wrapper{
clear:both;
margin:0;
padding:0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 940px;
height: auto;
background-color: lightgrey;
}
.flex-item {
width:380px;
margin-left:-40px;
}
.flex-item a{
color:grey !important;
font-size:10pt !important;
}
.leftbuttons1{
background-image: url(./img/Buttons1.jpg);
background-repeat:no-repeat;
padding: 5px 10px 10px;
}
.leftbuttons1 a{
color:grey;
font-size:10pt !important;
}
.leftbuttons{
background-image: url(./img/Buttons1.jpg);
background-repeat:no-repeat;
padding: 5px 0 10px 10px;
}
.leftbuttons a{
color:grey;
font-size:10pt !important;
}
.leftbuttons2{
background-image: url(./img/Buttons2.jpg);
background-repeat:no-repeat;
padding: 7px 0 10px 7px;
}
.leftbuttons2 a{
color:grey;
vertical-align:center;
font-size: 10pt !important;
}
.rightbuttons{
background-image: url(./img/Button.jpg);
background-repeat:no-repeat;
padding: 14px 0 20px 11px;
text-decoration:none;
}
.rightbuttons2{
background-image: url(./img/Button.jpg);
background-repeat:no-repeat;
padding: 14px 0 20px 11px;
}
.rightbuttonsAlert{
background-image: url(./img/Button.jpg);
background-repeat:no-repeat;
padding: 14px 0 20px 11px;
}
.rightbuttonsAlert a{
color:red !important;
}
.rightbuttonsDir{
background-image: url(./img/Button.jpg);
background-repeat:no-repeat;
padding: 14px 0 20px 11px;
}
img.buttonUlti{
float:right;
padding-top:15px;
padding-bottom:15px;
}
.shiftRes{
margin-left:27px;
padding-top:40px;
}
.departstyle{
font-size: 18px !important;
font-weight:bold;
padding-left: 10px;
margin: 0 0 7px 0;
}
.resstyle{
font-size: 18px !important;
font-weight:bold;
text-align:left;
padding-left:15pt;
margin: 0 0 7px 0;
}
HTML：
<div id="wrapper">
<!-- banner-wrap starts here -->
<div id="banner-wrapper">
<!-- Menu Tabs -->
<ul>
<li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a> <span style="color:white !important">|</span> <a href="ITResources.cfm"><span>Support</span></a></li>
</ul>
</div>
<div class="flex-container">
<div class="flex-item">
<ul class="menu">
<li class="departstyle">Departments</li>
<li class="leftbuttons1"><a href="#.cfm">Claims</a></li>
<li class="leftbuttons"><a href="#.cfm?">Credential</a></li>
<li class="leftbuttons"><a href="#.cfm">Customer </a></li>
<li class="leftbuttons"><a href="#">Decision </a></li>
<li class="leftbuttons"><a href="#.cfm">Employee </a></li>
<li class="leftbuttons"><a href="#.cfm">Finance</a></li>
<li class="leftbuttons"><a href="#.cfm">HCC</a></li>
<li class="leftbuttons2"><a href="#.cfm">Health System <br />Engagement <br /> </a></li>
<li class="leftbuttons"><a href="#.cfm">Marcom</a></li>
<li class="leftbuttons"><a href="#.cfm">Medical </a></li>
<li class="leftbuttons"><a href="#.cfm">Network </a></li>
<li class="leftbuttons"><a href="#.cfm">NextGen</a></li>
<li class="leftbuttons"><a href="#.cfm">Operations</a></li>
<li class="leftbuttons"><a href="#.cfm">Physician </a></li>
<li class="leftbuttons"><a href="#.cfm">Provider </a></li>
<li class="leftbuttons"><a href="#.cfm">Quality </a></li>
<li class="leftbuttons"><a href="#.cfm">Risk </a></li>
</ul>
</div>
<div class="flex-item">
<h6>Blah</h6>
<p></p>
</div>
<div class="flex-item">
<a href="https://n11.ultipro.com/logout.aspx"><img class="buttonUlti" src="img/UltiPro.jpg" alt="UltiPro" /></a>
<table width="100%;">
<tbody>
<tr>
<th class="resstyle">Resources</th>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Form.cfm"> Forms</a></td>
<td class="rightbuttons spacetd2"><a href=Postings.cfm">Postings</a></td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Locations.cfm"> Locations</a></td>
<td class="rightbuttons spacetd"><a href="Compliance.cfm">Compliance</a></td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Care.cfm">Care</a></td>
<td class="rightbuttons spacetd"><a href="Photos.cfm">Photos</a></td>
</tr>
<tr>
<td class="rightbuttons spacetd"><a href="Safety.cfm">Safety</a></td>
<td class="rightbuttonsDir spacetd"><a href="Directory.cfm">Directory</a></td>
</tr>
<tr>
<td class="rightbuttonsAlert spacetd"><a href="Alerts.cfm">Alerts</a></td>
</tr>
</tbody>
</table>
</div>
</div>
任何帮助将不胜感激
4 个答案:
答案 0 :(得分：1)
好的，我在这里看到了几个问题：
1）你想要3列并按百分比设置它们：#sidebarright：30％，＃main：50％和#sidebarleft：30％，所有这些都加起来为110％，超过100％和由于这个原因，＃sidebarleft列将自己定位在底部。
2）#sidebarleft有一个正确的填充，除非你将它的大小调整为边框，否则它将累加到百分比。
#sidebarleft {
width: 30%;
padding-top: 30px;
padding-right: 20px;
display: inline;
float: left;
box-sizing: border-box; /* add this line, or remove the right padding */
}
3）#main有一个左边距，将列向右推（这也加起来总可用空间），删除它使它看起来像这样：
#main {
float: left;
padding: 0;
width: 40% /* changed the width here */
}
4）最后重新排序HTML列，使它们看起来像这样（浮点数考虑了你拥有元素的顺序）：
...
<div id="content-wrapper">
<div id="sidebarleft">...</div>
<div id="main">...</div>
<div id="sidebarright">...</div>
</div>
...
我认为你应该真正考虑使用flexbox，它会帮助你解决这些问题。
更新
您遇到的问题是，使用提供的代码我看不到任何填充集，另外您设置负边距以删除.menu边距。所有ul和ol标签默认设置自己的边距，删除任何边距和/或填充：
ul{
list-style:none;
margin: 0;
padding: 0;
}
这应该修复第一部分，之后，为所有列添加填充，如：
.flex-item {
width:380px;
/*margin-left:-40px; remove this */
padding: 20px; /* added the padding to the column */
}
你在那里正确设置了填充。
答案 1 :(得分：0)
我并不喜欢使用表格来创建列。但是如果你正在寻找一种非常简单的方法......我建议在父容器中使用浮点数
.parent {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.parent > div { /* I prefer this but you can simply write '.parent > *' if you want to use all columns */
display: block;
width: 33%;
float: left;
min-height: 30px;
}
#child1 { background-color: #CE1126; }
#child2 { background-color: #FCD116; }
#child3 { background-color: #006B3F; }<div class="parent">
<div id="child1">I am the first child</div>
<div id="child2">I am the second child</div>
<div id="child3">I am the third child</div>
</div>
原谅过度使用颜色，但那是我国家的旗帜。希望这有帮助
答案 2 :(得分：0)
您可以尝试CSS3 FlexBox。基本示例如下所示：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
}<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
答案 3 :(得分：0)
在HTML中切换sidebarleft和sidebarright。您不需要浮点数，因此请移除float:right上的sidebarrright。我无法在所有代码中找到这个浮点数，所以我只是懒得并在CSS中删除它。只需将display:inline-block设置为所有3个div，您可以根据需要设置填充和边距：
#sidebarright, #main, #sidebarleft{
display:inline-block;
width:auto; //change this how you need
border:1px solid blue;
margin:30px;
}
#sidebarright{
float:none;
}
这是一个小提琴：https://jsfiddle.net/wnLw1kwu/1/
如果您想要更具移动性的响应式解决方案，请使用Bootstrap或使用其他答案中提供的Flexbox。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？