-1

だからここに私のコードがあります：

<?php
$query = mysql_query("SELECT * FROM  views WHERE viewer_ip='".$_SERVER['REMOTE_ADDR']."'")      or die(mysql_error());
$numrows = mysql_num_rows($query);
$serverViewsBeforeAdd = mysql_num_rows(mysql_query("SELECT * FROM views WHERE     server_id='".$_GET['s']."'"));

if(!empty($_SESSION['username'])){
$commentform = "<form action='scripts/addcomment.php?s=".$_GET['s']."' method='POST'><textarea name='comment' style='max-width:98%;min-width:98%;min- height:40px;max-height:40px;' placeholder='Leave a Comment'></textarea><br /><input      type='submit' value='Post' style='float:right;margin-right:2%;'></form>";    
}else{
$commentform = "";  
}

if(empty($_SESSION['voted_'.$_GET['s']])){
mysql_query("INSERT INTO views VALUES('','".$_GET['s']."','".$_SERVER['REMOTE_ADDR']."','".time()."')");
$_SESSION['voted_'.$_GET['s']] = 1;
$serverViews = $serverViewsBeforeAdd + 1;
}else{
$serverViews = $serverViewsBeforeAdd;
}
?>

<style>
#serverTitle {
font-family: corbel;
font-size: 28px;
color: #767676;
text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
#viewServerRight {
position:absolute;
top:0px;
right:0px;
width:73%;
padding-left:1%;
border-left:solid 1px #666666;
}
#viewServerLeft {
width:25%;
position:relative;
}
#serverActions {
float:right;
padding-top:10px;
padding-right:5px;
}
#serverStatsTitle {
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size: 25px;
color: #CFA900;
text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
#serverStatsAwnser {
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size: 20px;
color: #6A6A6A;
text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
</style>
<?php
$s = $_GET['s'];

$query = mysql_query("SELECT * FROM servers WHERE id='".$s."'") or die(mysql_error());
$numrows = mysql_num_rows($query);
if($numrows !== 0){
while($row = mysql_fetch_assoc($query)){

    if($row['server_owner'] == @$_SESSION['username']){
            $serverActionsEdit = "<a href='?p=editserver&s=".$row['id']."' class='button'>Edit</a>";
        }
    if(!empty($row['server_website'])){
            $serverActionsWebsite = "<a href='http://www.".$row['server_website']."' class='button' target='_blank'>Visit Website</a>";
        }
        $serverActionsVote = "<a href='scripts/vote.php?&s=".$row['id']."' class='button'>Vote</a>";
    $serverActionsVoteEmbed = "<a href='?p=voteembed&s=".$row['id']."' class='button'>Vote Embed Code</a>";

    @$serverActions = $serverActionsEdit." ".$serverActionsWebsite." ".$serverActionsVote." ".$serverActionsVoteEmbed;

    echo "<div id='viewServerLeft' align='center'>
    <span id='serverStatsTitle'>Votes</span>
    <br />
    <span id='serverStatsAwnser'>".$row['server_votes']."</span>
    <hr /><span id='serverStatsTitle'>Views</span>
    <br />
    <span id='serverStatsAwnser'>".$serverViews."</span></div>
    <div id='viewServerRight'><span id='serverTitle'>".$row['server_name']."</span><div id='serverActions'>".$serverActions."</div><hr /><br />".$row['server_description']."<br /><hr /><br /><h2>Comments</h2>".$commentform."</div>";
    echo "<title>".$row['server_name']." - ".$_SERVER['HTTP_HOST']."</title>";
}
}else{
echo "<h2><span style='color:red;'>ERROR 404</span>: Server with ID of ".$s." not found!</h2>";
echo "<title>404: Server Not Found!</title>";
}
?>

だから私がそれをどのように見せたいかというと、「viewServerRightは次のスタイルを持つ#wrapperの上にはありません:

#wrapper {
position:relative;
display:block;
width:90%;
margin-top:160px;
background-color:#CCCCCC;
margin-right:auto;
margin-left:auto;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
/*  padding:10px;  */
-ms-box-shadow:4px 4px 15px rgba(0, 0, 0, 0.8);
-o-box-shadow:4px 4px 15px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:4px 4px 15px rgba(0, 0, 0, 0.8);
-moz-box-shadow:4px 4px 15px rgba(0, 0, 0, 0.8);
box-shadow:4px 4px 15px rgba(0, 0, 0, 0.8);
}

これは今のように見えます：

ページへのリンク

今のやり方では #viewServerRight は #wrapper の上にあり、オーバーフローしても大きくなりませんが、 #viewServerLeft は #wrapper をオーバーフローさせます。

簡単な説明: #viewServerRight のコンテンツが多い場合に #wrapper の高さを大きくしたい

4

1 に答える 1

0

viewServerRight の位置は絶対的なので、ラッパーの高さには影響しません。次の 2 つのオプションがあります。

  • viewServerRight の位置を相対または静的に変更します
  • Javascript または jquery を使用します。viewServerRight の外側の高さを取得し、それに応じてラッパーの最小の高さを設定します。

編集：

はい、そうです、最初のものは機能しません。あなたのアプローチ全体では、viewServerRight divの位置を絶対に設定する必要があり、絶対位置を削除すると台無しになります。つまり、左右の div から配置を削除し、フロートを左に設定し、左右の div の前後に 2 つの空の div を追加します。これらの 2 つの空の div には、次の css 属性が必要です。

clear: both;

私が十分に明確だったことを願っています。幸運を ：）

于 2013-07-09T14:41:36.110 に答える