我想在HTML + CSS，其格式應該是這樣創造的鏈接行：如何在HTML，CSS中顯示特定的行格式？

（僞代碼）

<body class="class_with_minmaxwidth_set_in_css"> 
    <div class="container"> 
     <div class="row"> 
     <div class="fixed_left_40px"></div> 
     <div class="fluid_center_which_changes_with_window_size"></div> 
     <div class="fixed_right_40px"></div> 
     </div> 
     ... repeat more row divs 
    </div> 
</body>

我曾嘗試使用花車，位置和顯示器的各種組合對於三個div中的每一個，但仍然無法設置正確的組合。幫助將不勝感激！

來源

2013-04-24 aalapshah

你想要什麼它看起來像？用當前的html和css創建一個小提琴並上傳你想要的佈局的模型。 – martincarlin87 2013-04-24 11:56:25

如果要對齊div元素在line，使用display: inline:block

<div class="row"> 
    <div class="fixed_left_40px"></div> 
    <div class="fluid_center_which_changes_with_window_size"></div> 
    <div class="fixed_right_40px"></div> 
</div>

CSS：

.row div{ 
    display: inline-block; 

    height: 40px; 
} 

.fixed_left_40px{ 
    width: 40px;  
    background: blue; 
} 

.fixed_right_40px{ 
    background: red; 
    width: 40px; 
}

Working Fiddle

來源

2013-04-24 11:55:43

我必須跑步才能上班，但如果您需要更多幫助，請隨時放下評論。 – 2013-04-24 11:57:23

這不提供像OP那樣的流體中心單元詢問 – Turnip 2013-04-24 12:03:25

@ 3rror404你是什麼意思。編輯，現在我明白了。我會相應地更新。 – 2013-04-24 13:17:16

-1

.row div { 
    display: inline-block; 
} 

.row .fixed_left_40px { 
    float: left; 
    width: 40px; 
} 

.row .fixed_right_40px { 
    float: right; 
    width: 40px; 
}

看到http://jsfiddle.net/Bsrur/

來源

2013-04-24 11:57:57

這不提供像OP一樣的流體中心單元詢問 – Turnip 2013-04-24 12:03:01

它會自動執行@ 3rror404。加上OP沒有特別要求流體中心單元。 – 2013-04-24 12:13:52

不，它不。檢查你的小提琴http://jsfiddle.net/Bsrur/1/這個更新版本中的中心單元格的寬度。他的問題提到了「fluid_center_which_changes_with_window_size」 – Turnip 2013-04-24 12:16:43

display: table非常適合這樣的：

DEMO

<div class="container"> 
    <div class="row"> 
     <div class="fixed">40px</div> 
     <div class="fluid">fluid</div> 
     <div class="fixed">40px</div> 
    </div> 
</div>

.container { 
    display: table; 
    width: 100%; 
} 

.row { 
    display: table-row; 
} 

.row div { 
    display: table-cell; 
} 

.row div.fixed { 
    width: 40px; 
} 

.row div.fluid { 
    background: lightGreen; 
}

來源

2013-04-24 11:59:31 Turnip

如何在HTML，CSS中顯示特定的行格式？

回答

Working Fiddle

相關問題