CSS - DIV對齊問題

我在下面的CSS中遇到了一個小問題。CSS - DIV對齊問題

雖然箱子都排隊，我試圖讓文字出現在箱子裏面，然後風格化的文字...我什麼都嘗試過，似乎失敗。有些東西正在壓倒它，或者瀏覽器只是忽略它。

而且仍然是文本「基金會10 - 存在」總是超過了其預期的區域。這個文本是動態的，會不斷變化。所以這個塊的大小將根據塊中的字符數量而改變。所以這個值在CSS - > width：489px;會相應改變。

此外，這些塊中的每一個具有包含一個HTML表格的鏈接。 ...

一些限制沒有JavaScript的，沒有java，沒有PHP。直接的HTML和CSS。

任何人想利用這一個裂縫????

該代碼的網頁上：

#video_line { 
 
    width: 489px; 
 
    text-align: center; 
 
} 
 
#vl_desc { 
 
    float: left; 
 
    width: 200px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
} 
 
#vl_rental { 
 
    float: left; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
} 
 
#vl_sales { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
} 
 
#vl_view { 
 
    float: right; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
} 
 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"> 
 
    <p id="vl_text_desc">Foundation 100 - Presence</p> 
 
    </div> 
 
    <div id="vl_rental">TEXT</div> 
 
    <div id="vl_sales">TEXT</div> 
 
    <div id="vl_view">TEXT</div> 
 
</div>

這就是我要找 - >

來源

2016-05-23 MagicMiles

您可以創建你想要的它看起來像一個樣機？ –

@spencerlarry，上面編輯。再看看所需的輸出.... – MagicMiles

這裏是一個開始

#video_line { 
 
    width:489px; 
 
    text-align:center; 
 
} 
 

 
#vl_desc { 
 
    float:left; 
 
    width:250px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_rental { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
    color: white; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_sales { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
    color: darkgreen; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_view { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
    color: yellow; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"><span id="vl_text_desc">Foundation 100 - Presence</span></div> 
 
    <form id="vl_rental">TEXT</form> 
 
    <form id="vl_sales">TEXT</form> 
 
    <form id="vl_view">TEXT</form> 
 
</div>

來源

2016-05-23 16:26:39 LGSon

你的解決方案看起來不錯，謝謝。嗯，一個要求是，那些彩色塊是FORM語句

... – MagicMiles

@MagicMiles「這是一個開始」... –

@MagicMiles更新和更改div的形式的 – LGSon

簡單地改變以下樣式：

#vl_text_desc { 
    margin-top: 0; 
} 
#video_line { 
    width: 489px; 
    text-align: center; 
    display: inline; 
} 
#vl_view { 
    float: left; 
} 
#vl_desc { 
    float: left; 
    width: 200px; 
    height: 30px; 
    background: #ffffff; 
    margin-right: 16px; 
    margin-top: 0; 
}

從這裏你可以修改font-family和color根據自己的喜好。

來源

2016-05-23 16:34:16 super11

CSS - DIV對齊問題

回答

相關問題