0

愚かな div に問題があります :) コース用に Twitter に似た Web サイトを開発していますが、ツールバーの配置に問題があります (リツイート、削除...)

私のつぶやきのdivはこれです：

<div class="tweet">
    <img width="50px" height="50px" src="img/profiles/mannuk.png">
    <p>
        <span>mannuk</span><br>
        This is my first tweet that i've sent with my twitter. RT if you like it #firstTweet
    </p>
    <div class="tools">
        <a href="#retweet">Retweet</a>
        <a href="#delete">Delete</a>
    </div>
</div>

そしてcss3コード：

.tweet
{
    background-color: #1FCC84;
    border: 1px solid #000000;
    border-radius: 0.5em;
    margin: 2px 0;
    height: 100px;
    font-size: 0.8em;
}

.tweet img
{
    display: block;
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}

.tweet p
{
    display: block;
    padding-left: 5px;
    overflow: hidden;
    margin-top: 5px;
}

.tweet span
{
    font-weight: bold;
    padding-bottom: 8px;
}

.tweet .tools
{
    clear: both;
    position:relative;
    margin-top: 80px; 
    margin-left: 15px;
}

原点がツイートの親 div である位置をツール div に適用する必要がありますが、ほとんどの場合、原点は img の下で始まるため、適切に行う方法がわかりませんが、左マージンは正しく適用されます。

これで、140 文字のツイートと 20 ～ 30 文字のツイートの間に違いが生じます。ツールバーは、その親に対して相対的に配置されていません。

4

3 に答える 3

0

ほとんどそれを手に入れました...私のフィドルを見てくださいhttp://jsfiddle.net/bb7555/79Uzf/

ツールの上部マージンを下部マージンに設定するだけです:

.tweet .tools
{
    clear: both;
    position:relative;
    margin-bottom: 80px; 
    margin-left: 15px;
}
于 2013-07-13T11:07:12.017 に答える
0

toolsdiv を相対的に配置したい場合は、 float:right. それ以外の場合、位置が固定されている場合-この解決策を試してください

于 2013-07-13T11:14:59.683 に答える