Question

我想在左侧放置一个带有一些文字的边框，在右侧放置带有一些文字的边框。我该怎么做？

感谢。

谢谢你的答复，我得到了工作。再次感谢。

Answer 1

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

这是你要找的吗？

Answer 2

根据具体情况，有几种选择：

在左侧容器上使用浮动：float: left，在右侧容器上使用float: right
使它们成为内联元素或内联块 - display: inline-block可以创造奇迹
使用绝对定位，结合left和right属性

Answer 3

也许是这样的：

<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>

对你来说是一个好的开始。该示例仅通过利用负上边距将文本放在左侧，但应该很容易自定义它！（取自here）

您可以通过使用右对齐的子组件（.titlebox）将text-align: right拆分为两部分

CSS定位帮助

3 个答案: