Css 圆圈旁边的Div .圆圈{ 身高：165px； 宽度：165px； 显示：表格单元格； 文本对齐：居中； 垂直对齐：中间对齐； 边界半径：50%； 背景：白色； 颜色：黑色； 线高：35px； } .月{ 字体大小：60px； 字体大小：粗体； } .年{ 字体大小：20px； }

将“thot”div移到“circle”div旁边的最佳方法是什么

（“Cirle”）[后又名“thot div”]

链接

---

示例：ramovamusic.com/Example.jpg

现在我明白了你的问题。问题是你的文章标签上有一个设置的宽度（500px），这需要增加，这样你就可以浮动你的类圆圈和类thot。这样他们就会挨在一起了

这是一个关于我所说内容的工作演示

注意，我删除了文章中的宽度，将float right和width添加到类thot中，并将float left添加到圆圈中。现在他们在同一条线上。你需要稍微修改一下，使它与你的链接保持一致

html:

---

在这里，最好在一个范围内应用圆圈，使所有文本保持在一起！否则它会像你看到的那样变得棘手

---

将

float:left

添加到圆div和一些右边距中，对于.date类，添加：

div{
    float:left;
}
span.circle{
    border: 1px solid red;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-left: 10px;
    line-height: 95px;
    text-align:center;
}
p{
   text-align:center;
   margin-top:40px;
}

对于

.thot

类添加：

.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}

最后，您需要清除浮动：

.thot {
  float:left;
  width: 300px; /* or whatever width works for you */
}

我在CSS文件中做了一些更改

.post:after {
  content: '';
  display: table;
  clear:both;
}

---

新的CSS。检查小提琴。

你必须显示你所有的css/html-可能一个链接就可以了，我添加了这样的链接？我在回答中说了这一点，但我觉得问题是你的文章标签上有一个最大宽度。您需要删除或增加以适应所有内容。然后我做的是把圆圈向左浮动，把全班同学向右浮动。给他们两个一个宽度也会有帮助。你需要到处玩才能得到你想要的结果。我还注意到你在使用显示表格单元格。。。为什么？我马上看演示。之所以使用表格单元格，是因为这是我发现的将多行文本置于圆圈中心的唯一方法（这里就是一个例子）。很抱歉，标题有误导性。它应该是圆圈旁边的div。但无论哪种方式，这都不起作用，因为我的cirlce包含多行文本，而不仅仅是一行。圆圈应该在你的站点上。在标题或文本旁边？两者都是。标题和文本都在“thot”div中，应该浮动在圆圈旁边。（圈）[带标题的整篇文章]我添加了一个图片示例。我还添加了什么数据类？这只是将标题移到了圈内。我想要现在的布局，只是将“thot”div中的所有数据移动到圆div的右侧，而不是我想要的。请参阅主帖子中更新的示例图像。这不允许多行文本。匹配大量文本将非常困难，让一个单独的文本在一个圆圈中。你可能需要重新思考……这几乎可以做到，但是如果有多篇文章，所有的圆圈都会出现在第一篇文章的左上角。

.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}

.thot {
  float:left;
  width: 300px; /* or whatever width works for you */
}

.post:after {
  content: '';
  display: table;
  clear:both;
}

.circle {
    height: 165px;
    width: 165px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color:white;
    border-radius: 50%;
    background: black;
    color:black;

    position:absolute;
}
.month{
    font-size:40px;
    font-weight:bold;
    color:white;
    line-height:90px;  
}
.year{
    font-size:20px;
    color:white;
    line-height:60px;  
}
.thot{
    border:1px solid black;    
    float:right;
    width: calc(100% - 180px);
    height:200px;
    position:relative;

}