Question

我有以下看似

的div

 @namehere   texthereee         today       10 retweet
                                replay       
                                favorite

我正在尝试编辑css以使最终形状看起来像

@namehere   texthereee  testetest              10 retweet
            today   replay   favorite

我目前的css看起来像是

 .top-tweet, .top-tweet a
 {
font-size: 13px;
text-align: center;
 }
  .col_3 a
 {
font-size: 12px;
 }
 .top-tweet .col_1
 {
width: 60px;
  }
  .top-tweet .col_2
  {
width: 375px;
text-align: left;
  }
  .top-tweet .col_3
  {
width: 100px;
   }
   .top-tweet .col_4
   {
width: 60px;
   }

这里的html包含我想要调整的div，

         echo "<div class='divrow top-tweet'>";

    echo "<li class='col_1' ><a href='http://www.twitter.com/#!/" . $tweeted_by . "'> <img src='" . $avatar . "' />" . $orig_tweeted_by . " </a></li>";

    echo "<li class='col_2'> <div><a class='text_bigger' href='http://www.twitter.com/#!/" . $tweeted_by . "' style='font-size:13px'>@".$tweeted_by."</a></div>      " . $tweet . "</li>";

    echo "<li class='col_3'> <a href='http://www.twitter.com/#!/" . $tweeted_by . "/status/" . $id . "'>"  . $since . " </a> ";

    echo "<li class='col_3'> <a href='https://twitter.com/intent/tweet?in_reply_to="  . $id . "'> Reply  </a>  ";
    echo "<li class='col_3'> <a href='https://twitter.com/intent/favorite?tweet_id="  . $id . "'> Favorite  </a>  ";


    echo "<li class='col_4'>".$retweet_count."<br>retweet</li>";    
    echo "</div>"; 
}
echo "</div>";

.col_1..3今天是重播收藏

任何提示？

Answer 1

在所有div中尝试一个类并向左浮动它们并设置所需的宽度

jsfiddle

你也可以给出不同的宽度

<div class="one">skfhsfs</div> 
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>

CSS

.one{
    width:100px;
    border:1px solid red;
    float:left;
}

Answer 2

如果您发布了正在尝试使用的HTML，这会有所帮助。

无论如何，试试这个。

<div class="main">
    <div class="col_1">@namehere</div>
    <div class="col_2">
        <div>text here.. text here..</div>
        <div>
            <div class="action">today</div>
            <div class="action">replay</div>
            <div class="action">favorite</div>
        </div>
    </div>
    <div class="col_3">10 retweet</div>
</div>

.main {width: 500px}
.col_1, .col_3, .action {width: 100px; float: left}
.col_2 {width: 300px; float: left}

我如何调整CSS位置

2 个答案: