Question

<article style="max-width:500px;" class="post" id="post-<?php the_ID(); ?>">
    <div class="circle">
        <div class="month"><?php the_time(d) ?></div>
        <div class="year"><?php the_time('M Y');?></div>
    </div>
    <div class="thot">
        <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h4>
        <?php the_excerpt('Read More'); ?>
        <hr />
    </div>
</article>


<style>
.circle {
    height: 165px;
    width: 165px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: white;
    color:black;
    line-height:35px;
}
.month{
    font-size:60px;
    font-weight:bold;
}
.year{
    font-size:20px;
}
</style>

移动＆＃34; thot＆＃34;最好的方法是什么？在＆＃34;圈＆＃34;旁边的div DIV？

（＆＃34; Cirle＆＃34;）[POST aka＆＃34; thot div＆＃34;]

链接http://ramovamusic.com/?page_id=165

示例：ramovamusic.com/example.jpg

Answer 1

所以现在我明白了你的问题。问题是你的文章标签上有一个设定的宽度（500px），这需要增加，这样你就可以浮动你的班级圈和班级。这样他们就会彼此相邻。

这是一个关于我所谈论的 New Demo Working

的工作演示

注意我删除了文章的宽度，将浮动右侧和宽度添加到类thot并向左浮动。现在他们在同一条线上。您需要稍微调整它以使其与您的链接对齐。

HTML：

<article style="" class="post" id="post-171">
<div class="circle">
    <div class="month">20</div>
    <div class="year">Mar 2015</div>
</div>
<div class="thot">
    <h4><a href="http://ramovamusic.com/?p=171" rel="bookmark" title="Permanent Link to test 2">test 2</a></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus urna, mollis in nibh nec, fermentum rhoncus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ante arcu, laoreet ut efficitur vel, ornare sed risus. Cras eget interdum erat, finibus facilisis justo. Nam lorem mi, laoreet at dui non, rutrum semper felis. <a class="read-more" href="http://ramovamusic.com/?p=171">Read More</a></p>
    <hr />
</div>
</article>

的CSS：

.circle {
   height: 165px;
   width: 165px;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   border-radius: 50%;
   background: red none repeat scroll 0% 0%;
   color: #000;
    line-height: 35px;
    float:left;
}
.thot{
   float:right;
   width:60%;
 }

Answer 2

在这里，您最好在跨度中应用圆圈以将所有文本保持在一起！否则它会像你看到的那样变得棘手！

https://jsfiddle.net/75tn8yps/3/

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

Answer 3

将float:left添加到您的圆圈div和一些右边距，对于.date类，添加：

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

for .thot class add：

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

最后你需要清除花车：

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

Answer 4

Demo In Fiddle

我确实改变了CSS文件中的一些内容

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

}

新的CSS。检查小提琴。

圆圈旁边的Div

4 个答案: