我很难对齐内容。我正在尝试创建三列,并且我知道我可以使用引导程序,但与此同时,我想像此站点一样执行以下样式:

html - 无法使用CSS创建三列-LMLPHP

以下是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>&nbsp;<span style="color:white !important">|</span>&nbsp;<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时的结果:

html - 无法使用CSS创建三列-LMLPHP

如您所见,我无法获得显示链接的按钮图像,并且到处都有间距,边距和填充。

这是我的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>&nbsp;<span style="color:white !important">|</span>&nbsp;<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/

10-12 12:56
查看更多