一列內容不符合下一欄網頁html css

我是初學html和css編碼器。我有一個頁面，我把主體分成兩列，第一列有一些文本，第二列有一組標籤。但是，製表符的頂部不會與第一列中文本的頂部對齊。我嘗試過不同的方式，但似乎沒有任何工作適合我。一列內容不符合下一欄網頁html css

This is the webpage that I am creating showing the set of tabs not aligning with the text(from "Create New" down) in the first column.

這是html代碼：

<html> 

<head> 

<div class="MainHead"> 
    <h1>Doors 'n' More</h1> 
    <h3>Creating Openings to Success</h3> 
    <p>Help, User Profile</p> 
</div> 

<link rel="stylesheet" type="text/css" href="Page1.css"/> 

</head> 

<body> 

<div class="HomeBody"> 

    <div class="Column1"> 
     <h2>Create New</h2> 
     <h2>Shortcuts</h2> 
     <h2>Recent Items</h2> 
     <h2>Messages and Alerts</h2> 
    </div> 

    <div class="BodyTabs"> 

     <div class="tab"> 
      <input type="radio" id="HomeTab" name="TabGroup1" checked> 
      <label for="HomeTab">Home</label> 
      <div class="content"> 

       <div class="Column2"> 
        <h2>Feed</h2> 
        <h2>Active Jobs</h2> 
       </div> 

       <div class="Column3"> 
        <h2>Dashboard</h2> 
       </div> 

      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="ProjectsTab" name="TabGroup1"> 
      <label for="ProjectsTab">Projects</label> 
      <div class="content"> 
       All Projects go on this tab. 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="CustomersTab" name="TabGroup1"> 
      <label for="CustomersTab">Customers</label> 
      <div class="content"> 
       All Customers go on this tab. 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="DashboardTab" name="TabGroup1"> 
      <label for="DashboardTab">Dashboard</label> 
      <div class="content"> 
       The Dashboard goes on this tab. 
      </div> 
     </div> 

    </div>  
</div> 

</body> 

</html>

這是CSS代碼：

.MainHead{ 
padding: 5px; 
} 
.HomeBody{ 
width: 100%; 
height:800px; 
} 
.Column1{ 
width: 20%; 
float:left; 
} 
.BodyTabs{ 
position: relative; 
min-height: 200px; 
clear: both; 
width: 80%; 
float: right; 
} 
.tab{ 
float: left 
} 
.tab label{ 
background: #eee; 
padding: 10px; 
border: 1px solid #ccc; 
margin-left: -1px; 
position: relative; 
left: 1px;  
} 
.tab [type=radio] { 
display: none; 
} 
.content { 
position: absolute; 
top: 28px; 
left: 0; 
background: white; 
right: 0; 
bottom: 0; 
padding: 20px; 
border: 1px solid #ccc; 
height: 700px; 
} 
[type=radio]:checked ~ label { 
background: white; 
border-bottom: 1px solid white; 
z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
z-index: 1; 
} 
.Column2{ 
width: 75%; 
float:left; 
} 
.Column3{ 
width: 25%; 
float:left; 
}

預先感謝您的幫助！

來源

2017-02-17 Beth

嘗試刪除「clear：both;」來自.BodyTabs，如果你可以把你的代碼放在codepen中，那麼人們可以嘗試你的代碼，這會更好。 – Seno

是否這樣？ http://codepen.io/anon/pen/vgMvwM –

問題是你在浮動元素上使用clear: both。應該使用clear: both來分隔行，而不是彼此相鄰的列。你基本上說明你希望第二列不在第一列旁邊浮動。只需從.BodyTabs刪除clear: both，以獲得期望的結果：

.BodyTabs { 
    position: relative; 
    min-height: 200px; 
    width: 80%; 
    float: right; 
}

我創建了一個小提琴展示這個here。

請注意，這將簡單地移動彼此相鄰的兩列。如果你想在標籤的頂部是用「新建」頂部完全齊平，你還需要有一點餘量爲.BodyTabs頂部：

.BodyTabs { 
    position: relative; 
    min-height: 200px; 
    width: 80%; 
    float: right; 
    margin-top: 35px; 
}

次要搗鼓出這樣可以被發現here。

希望這會有所幫助！ :)

來源

2017-02-17 01:25:47

感謝所有提到清楚的人：都是錯誤。我已經擺脫了它，它更好地工作謝謝:)它也解決了我的下一個問題，關於行！ @ObsidianAge – Beth

一列內容不符合下一欄網頁html css

回答

相關問題