簡體   English   中英

CSS定位幫助

[英]CSS Positioning Help

我想在同一行的左側放置一個帶有一些文本的邊框,在右側放置一個帶有一些文本的邊框。 我該怎么做?

謝謝。

謝謝大家的答復,我很努力。 再次感謝。

<div>
  <div style="float:left;border:solid 1px black;">
    Some text
  </div>
  <div style="border:solid 1px black;">
    More text
  </div>
</div>

這是您要找的東西嗎?

根據情況,有幾種選擇:

  • 使用floats: float: left的容器上, float: right右邊的容器上
  • 使它們成為內聯元素或內聯塊- display: inline-block可以創造奇跡
  • 使用絕對定位,並結合leftright屬性

也許是這樣的:

<html><head>
<style type="text/css">

#content{
    border:2px solid #999;
    padding:10px;
}
.titlebox{
    float:left;
    padding:0 5px;
    margin:-20px 0 0 30px;
    background:#fff;
}
</style></head><body>

<div id="content">
    <div class="titlebox">Title</div>
    <p>Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.</p>
</div>
</body></html>

對您來說可以是一個好的開始。 該示例僅通過利用負的上邊距將文本放在左側,但是自定義起來應該很容易! (從這里拍攝)

您可以通過在其上具有正確標題的右對齊子組件( text-align: right )將.titlebox分為兩部分

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM