CSS/HTML左右浮動？

我似乎無法弄清楚如何從我製作的Photoshop模型中做CSS。下面的圖片顯示了我想要完成的事情。基本上，每個設計/修訂版塊都是一個風格爲<li>的標籤，我想將標題浮動到左側，日期/時間浮動到右側。此外，我希望一切都是垂直對齊的。CSS/HTML左右浮動？

任何想法？我試圖在每個<li>中使用一個表格，但這似乎不起作用（或者我做錯了）。

想法？

enter image description here

來源

2012-05-10 Jon

我想你想要[this]（http://jsfiddle.net/EjVFW/）以外的東西？ – jimw

請參閱this Fiddle，應該是你正在嘗試做的！

HTML

<ul> 
    <li> 
     <a href="#" title="" class="clearfix"> 
      Design 1 
      <span>May 6, 2012<br>11:34AM</span> 
     </a> 
    </li> 
    <li> 
     <a href="#" title=""class="clearfix"> 
      Revision 1 
      <span>May 7, 2012<br>2:14AM</span> 
     </a> 
    </li> 
</ul>

CSS

body { 
    background-color: #000; 
    margin: 0; 
    padding: 20px; 
    font-family: sans-serif; 
} 
ul { 
    list-style-type: none; 
} 
li { 
    display: block; 
    width: 240px; 
    background-color: #212121; 
    border: 1px solid #212121; 
    border-top: 1px solid #444; 
} 
li a { 
    padding: 10px; 
    color: #fff; 
    font-size: 18px; 
    display: block; 
    line-height: 24px; 
    text-decoration: none; 
} 
li span { 
    float: right; 
    font-size: 10px; 
    display: block; 
    line-height: 12px; 
    color: #999; 
    text-align: right; 
} 

/* helpers */ 
.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    zoom: 1; 
}

Analise的CSS來了解更多關於浮動和文檔工作流程！

瞭解更多關於它：

CSS Float

Document Flow/Visual Formating

和打印屏幕：

enter image description here

來源

2012-05-10 21:08:26 Zuul

如果你做的每個<li>塊元素，然後裏邊有放兩個<div>的，浮動的一個向左，一個向右？

<li style="dislpay:block;"> 
    <div style="float:left;">Design 1</div> 
    </div style="float:right;">May 6, 2012</div> 
</li>

來源

2012-05-10 20:56:45 kd7iwp

避免使用內聯CSS。而div's真的很糟糕。使用一些標題和日期元素 –

@WouterJ，我同意應該避免內聯代碼。請解釋爲什麼_「div's非常糟糕」_。 – Sparky

@ Sparky672分區沒有特殊的語義含義。標題（設計1）在這裏具有標題的含義。所以你需要使用一個元素，其語義是一個標題，即標題（h1 - h6）。日期代表日期，因此需要在日期元素中。這是最佳的語義。只有在沒有與元素的目標相匹配的語義元素並且它是塊時才應該使用分區。一個標題和一個日期並不是真正的塊，並且有元素具有較強的語義意義，所以在這個例子中，div's是不好的。 –

您仍然可以使用<li>標記。做這樣的事

<li> 
    <div class='a'> 
    </div> 
    <div class='b'> 
    </div> 
</li>

把a和b都浮在左邊。如果需要容器也是如此。記住這可能會強制你指定寬度。如果沒有，你可以使用display：inline-block的

來源

2012-05-10 20:57:28 Balaarjunan

在HTML：

<ul> 
    <li> 
     <span class="title">Design</span> 
     <span class="date">2012 may 15</span> 
    </li> 
</ul>

在CSS：

li .title{ 
    float: left; 
    display: block; 
    width: 150px; 
} 
li .date{ 
    float: right; 
    display: block; 
    width: 50px; 
}

來源

2012-05-10 20:57:41 Morteza

爲此使用標題和日期元素。 –

@WouterJ，不是每個人都使用HTML5代碼。 – Sparky

@ Sparky672標題是HTML1.0（我認爲） –

-1

基本上，你要使用的容器<div>'s到float您的項目各自的方向。然後，爲左側項目設置左邊距和垂直對齊，右邊項目的右邊距和垂直對齊。

這是它的基礎知識，我不能在我的手機上詳細說明。我稍後可能會編輯它。

來源

2012-05-10 20:58:15 Brendan

因此，如果您無法完全回答，請不要發佈答案。 – Sparky

誰需要這樣簡單的完整答案？ – Brendan

OP。他問這個問題「怎麼樣？」然後接受另一個完整的代碼，解釋，文檔和演示的答案。 – Sparky

我會創建兩個寬度爲50％的div標籤，並將其浮動到各自的邊。所以我們的標記是。

<ul> 
    <li> 
     <div class="title"> 
      Title 
     </div> 
     <div class="date"> 
      May 10 
     </div> 
    </li> 
</ul>

然後我們只用下面的CSS來設計它。

.title, 
.date { 
    width: 50%; 
} 

.title { 
    float: left; 
} 

.date { 
    float: right; 
}

來源

2012-05-10 20:58:37

你的問題的標題是當場:)

做這樣的事情，你可以使用float財產

用下面的標記：

<ul> 
    <li> 
     <div class="name">Design</div> 
     <div class="time">01/01/2011</div> 
    </li> 
    <li> 
     <div class="name">Revision</div> 
     <div class="time">01/01/2012</div> 
    </li> 
<ul>

和CSS ：

.name{ 
    float:left; 
} 

.time{ 
    float:right; 
} 

li{ 
    clear:both;   
}

這應該做的伎倆。

Example here

來源

2012-05-10 20:59:59

你把float: left;標題和float: right;日期。一些示例：

<ul> 
    <li> 
    <h4>Design 1</h4> 
    <date datetime="2012-05-06T11:34:00">May 6, 2012 <span>11:34 AM</span></date></li> 
    </li> 
    <li> 
    <h4>Revision 1</h4> 
    <date datetime="2012-05-07T14:14:00">May 7, 2012 <span>2:14 AM</span></date></li> 
    </li> 
</ul>

現在，添加這種風格：

li h4 
{ 
    float: left; 
} 
li date 
{ 
    float: right; 
}

或者，如果你不想使用HTML5（我不明白爲什麼不）：

<ul> 
    <li> 
    <h4>Design 1</h4> 
    <span class="date">May 6, 2012 <span>11:34 AM</span></span></li> 
    </li> 
    <li> 
    <h4>Revision 1</h4> 
    <span class="date">May 7, 2012 <span>2:14 AM</span></span></li> 
    </li> 
</ul>

而一個.之前date在CSS中添加。

來源

2012-05-10 21:00:50

也許你應該提到''是HTML5代碼，並不適用於所有瀏覽器。 – Sparky

@ Sparky672因爲您給日期一個浮點值，它會得到'display：block;'，然後您可以像瀏覽器支持它一樣對它們進行樣式設置。所以它不需要提及。 –

<!DOCTYPE html> 

<html> 
<head> 
    <title>Page Title</title> 
    <style type="text/css"> 

     p { 
      margin: 0; 
     } 

     #revision_block li { 
      height: 50px; 
      width: 250px; 
      background: url("path/to/your/background_image.jpg/png") top left no-repeat; 
      display: block; 
     } 

     #revision_block li .title { 
      font-size: 20px; 
      padding-top: 13px; 
      color: #eae; /*your color*/ 
      position: relative; 
      float: left; 
     } 

     .date { 
      text-align: right; 
      float: right; 
      padding-top: 7px; 
     } 

     .date p { 
      border: 0; 
      margin: 0; 
      font-size: 12px; 
      line-height: 18px; 
      color: #eae; /*your color*/ 
     } 

     .clearfix:after { 
       content: "."; 
       display: block; 
       clear: both; 
       visibility: hidden; 
       line-height: 0; 
       height: 0; 
     } 

     .clearfix { 
       display: inline-block; 
     } 

     html[xmlns] .clearfix { 
       display: block; 
     } 

     * html .clearfix { 
       height: 1%; 
     } 

    </style> 
</head> 

<body> 

    <ul id="revision_block"> 
     <li class="clearfix"> 
      <p class="title">Design 1</p> 
      <div class="date"> 
       <p>May 6, 2012</p> 
       <p>11:34</p> 
      </div> 
     </li> 
     <li class="clearfix"> 
      <p class="title">Design 1</p> 
      <div class="date"> 
       <p>May 6, 2012</p> 
       <p>11:34</p> 
      </div> 
     </li> 
    </ul> 

</body> 
</html>

來源

2012-05-10 21:12:46 Mohammer

CSS/HTML左右浮動？

回答

相關問題