html - 无法使用 CSS 创建三列

标签 html css

我很难对齐内容。我正在尝试创建三列，我知道我可以使用 Bootstrap ，但与此同时，我想像这个网站一样做以下风格:

enter image description here

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 时的结果:

enter image description here

如您所见，我无法获取用于显示链接的按钮图像，而且到处都是间距、边距和填充。

这是我的 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 列将因此定位在底部。

#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 列，使它们看起来像这样( float 考虑了元素的顺序):

...
<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/

上一篇：html - Bootstrap 画廊悬停

下一篇：css - 仅使用 CSS 设置相邻选定列表项的样式

相关文章：

javascript - 如何使用类名获取最近的 td 的值

javascript - 多个模态框 : no clue about javascript

javascript - 如何设置由 javascript 动态创建的元素的样式

javascript - 解绑后使用绑定(bind)

javascript - 谁能帮我让搜索栏正常工作，因为我现在有 JS 提示符？

php - 将文本值从下拉列表传输到其各自的数据库 ID - sql 插入和 php

javascript - 脚本中模糊的div如何分配悬停点击

javascript - 如何在水平滚动上添加平滑滚动效果？

html - 像 pintrest.com 上那样的 float DIV

html - 由于四舍五入不同，PNG 图像在 Chrome 中模糊；怎么办？

©2024 IT工具网  联系我们