我很难对齐内容。我正在尝试创建三列,并且我知道我可以使用引导程序,但与此同时,我想像此站点一样执行以下样式:
以下是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>
任何帮助,将不胜感激
最佳答案
好的,我在这里看到了几个问题:
1)您需要3列,并按百分比设置它们:#sidebarright:30%,#main:50%和#sidebarleft:30%,它们加起来总计为110%,即超过100%,而#sidebarleft列因此,它将自身定位在底部。
2)#sidebarleft具有右填充,除非您将其box-size设置为border-box,否则它的百分比将加起来。
#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 */
}
并且您在此处正确设置了填充。
关于html - 无法使用CSS创建三列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38062924/