1列の内容が次の列のWebページと一致していませんhtml css

私は初心者のhtmlとcssコーダーです。私は、本体を2列に分割したページがあり、最初の列にはテキストが、2列目にはタブがあります。ただし、タブの上部は、最初の列のテキストの上部に揃っていません。私はさまざまな方法で試しましたが、何も私にとってはうまくいかないようです。1列の内容が次の列のWebページと一致していません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は、の行を分離するために使用し、互いに隣り合っている列は使用しないでください。基本的には、2番目の列が最初の列の横に浮かないようにしたいということです。

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

私はこのhereを展示フィドルを作成しました：単純に望ましい結果を得るために.BodyTabsからclear: bothを削除します。

これは、単に2つの列を隣り合わせにシフトすることに注意してください。あなたは、タブの一番上が「新規作成」のトップと完全に同一面になりたい場合は、.BodyTabsの上部に余白を少しも必要になります：

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

この缶を示す二次フィドル見つけられるhere。

希望すると便利です。 :)

出典

2017-02-17 01:25:47

誰もが明らかに言ったおかげで両方のエラー。私はそれを取り除きました、そしてそれはずっと良い感謝を働かせます:)それはまた、行に関して私の次の質問を解決しました！ @オビディアンエージ – Beth

1列の内容が次の列のWebページと一致していませんhtml css

答えて

関連する問題