使用php代碼在twitter tweet時間軸中圖像和文本未正確對齊

Question

我試圖使用php代碼檢索我的Twitter主頁的時間軸。當我嘗試重現時間軸時，個人資料圖片和tweet文本未正確對齊。 當我在圖片標簽中使用float時，某些推文已正確對齊，但其中一些未對齊。我無法附加屏幕截圖。我不想使用javascript。有人可以讓我知道發生了什么錯誤。 我想要個人資料圖片和推文並排。 html代碼：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<?php
require_once('TwitterAPIExchange.php');
/** Set access tokens here - see: https://dev.twitter.com/apps/ **/
$settings = array(
    'oauth_access_token' => "",
    'oauth_access_token_secret' => "",
    'consumer_key' => "",
    'consumer_secret' => ""
);
$url = "https://api.twitter.com/1.1/statuses/home_timeline.json";
$requestMethod = "GET";
if (isset($_GET['user'])) {$user = $_GET['user'];} else {$user = "srini001";}
if (isset($_GET['count'])) {$count = $_GET['count'];} else {$count = 20;}
$getfield = "?screen_name=$user&count=$count";
$twitter = new TwitterAPIExchange($settings);
$string = json_decode($twitter->setGetfield($getfield)
->buildOauth($url, $requestMethod)
->performRequest(),$assoc = TRUE);

$user_timeurl = "https://api.twitter.com/1.1/statuses/user_timeline.json";
$user_timestring = json_decode($twitter->setGetfield($getfield)
->buildOauth($user_timeurl, $requestMethod)
->performRequest(),$assoc = TRUE);


if($string["errors"][0]["message"] != "") {echo "<h3>Sorry, there was a problem.</h3><p>Twitter returned the following error message:</p><p><em>".$string[errors][0]["message"]."</em></p>";exit();}
$x = 1;

echo"test";echo "<br />";
$twet="RT @MercedesAMGF1: Good to see @SChecoPerez and @NicoHulkenberg back in business today. Top work from @ForceIndiaF1 :) #MBFamily #F1";
echo "$twet";echo "<br />";
        $txt = preg_replace('/@(\S+)/i', '<a href="https://twitter.com/#!/$1">@$1</a>', $twet);

echo "$txt";echo "<br />";

foreach($string as $items)
    {
        echo "text";"<br/>";
        $tw = $items['text'];



        echo "$x"; echo "<br />";
        echo "Time and Date of Tweet: ".$items['created_at']."<br />";
        echo "Tweeted by: ". $items['user']['name']."<br />";
        echo "Screen name: ". $items['user']['screen_name']."<br />";
        echo "Followers: ". $items['user']['followers_count']."<br />";
        echo "Friends: ". $items['user']['friends_count']."<br />";
        echo "Listed: ". $items['user']['listed_count']."<br /><hr />";
        $x=$x +1;
    }
?>
<div class="blok">
    <h1>html</h1>
    <?php
    foreach($string as $items)
    {
                $tw = $items['text'];
                $screen_name = $items['user']['screen_name'];
                $prof_img = $items['user']['profile_image_url'];
                $txt = preg_replace('/http:\/\/(\S+)/i', '<a href="http://$1">http://$1</a>', $tw);
                $txt = preg_replace('/https:\/\/(\S+)/i', '<a href="http://$1">https://$1</a>', $txt);

                $txt = preg_replace('/#(\S+)/i', '<a href="https://twitter.com/#!/#$1">#$1</a>', $txt);
                                //echo "$txt"; echo "<br />";

                $txt = preg_replace('/@(\S+)/i', '<a href="https://twitter.com/#!/$1">@$1</a>', $txt);


                ?>
                <div ><img style="float:left"  src = "<?= $prof_img ?> "/><?= $txt ?></div>
                <br/>

<?

    }
?>
</div>

<div class="blok">
    htmltest

</div>
</body>
</html>

我的CSS代碼：

.blok{
    display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
  max-height: 400px;
  overflow-y: auto;
}

.blok p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

.blok a {
  color: blue;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

.blok a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

Answer 1

我將CSS更新為以下內容：

.line{    
    height: 60px;
    margin-left:65px;

  }

  .twprof{
    height: 60px;
    float: left;

  }

我也將html代碼更新如下：

<div class="twprof" ><img src = "<?= $prof_img ?> "/></div><div class="line" ><b><?= $screen_name ?> : </b><?= $txt ?></div>

現在工作正常。

使用php代碼在twitter tweet時間軸中圖像和文本未正確對齊

問題描述

1 個解決方案

解決方案1
0 2015-07-29 12:13:05

我將CSS更新為以下內容：

我也將html代碼更新如下：

使用php代碼在twitter tweet時間軸中圖像和文本未正確對齊

問題描述

1 個解決方案

解決方案1 0 2015-07-29 12:13:05

我將CSS更新為以下內容：

我也將html代碼更新如下：

解決方案1
0 2015-07-29 12:13:05