【发布时间】：2018-03-15 06:10:09
【问题描述】：
我需要帮助！！！我被一个问题困住了！！当我的网站显示在我的 13 英寸 Mac 上时，一切都在我想要的位置，而如果我在较小的 Mac 或其他任何东西上运行它，事物的位置并不是我想要的。我该如何解决？这是我的一个页面的代码的主要部分：
<?php
$sql = "SELECT * FROM movieimg WHERE name = '$movie_name'";
$query = $mysqli->query($sql);
$row = $query->fetch_array();
$row_movieid = $row['id'];
$reviewsql = $mysqli->query("SELECT * FROM `reviews` WHERE
`movieid` = '$row_movieid'");
if ($reviewsql == true) {
$avgsql = $mysqli->query("SELECT AVG(rating) FROM `reviews`
WHERE `movieid` = '$row_movieid'");
$avg = $avgsql->fetch_assoc();
while ($reviews = $reviewsql->fetch_array()) {
$average_rating = $avg['AVG(rating)'];
echo '<div class="yes-reviews"><span class="average-
rating">Average rating: </span>' . $average_rating . '</div>';
}
$totalsql = $mysqli->query("SELECT COUNT(id) FROM `reviews`
WHERE `movieid` = '$row_movieid'");
while ($totalsqlrow = $totalsql->fetch_assoc()) {
$total_reviewed = $totalsqlrow['COUNT(id)'];
echo '<div class="total-reviewed">Total Reviews: ' .
$total_reviewed . '</div>';
}
} else {
echo '<div class="reviews">There are no reviews for this movie
yet. Would you like to be the first?</div>';
}
echo "<div class='movie-name-and-date'><h1>[ " . $row['name'] . "
(" . $row['m_date'] . ") ]</h1>";
echo '<div class="movie-img"><img src="../images/movies/' .
$row['url'] . '" width="205" height="305"></div>';
echo '<div class="bio">' . $row['bio'] . '</div>';
echo '<div class="rating"><span>Rating: </span>' . $row['rating'] .
'</div>';
echo '<iframe width="1000" height="400" src="' . $row['y_url'] .
'">
</iframe>';
echo '</div>';
echo '<form action="../comment.php?m=' . $movie_name . '"
method="post">
<label for="rating" class="rate-label">Your rating:
</label>
<select id="rating" name="rating" class="rate">
<option value="">Rate your movie...</option>
<option value="10">½</option>
<option value="20">1</option>
<option value="30">1 ½</option>
<option value="40">2</option>
<option value="50">2 ½</option>
<option value="60">3</option>
<option value="70">3 ½</option>
<option value="80">4</option>
<option value="90">4 ½</option>
<option value="100">5</option>
</select>
<textarea name="comment" class="comment"
placeholder="Add a comment about the movie..."></textarea>
<input type="hidden" name="userid" value="' .
$userid["id"] . '">
<input type="hidden" name="movieid" value="' .
$row["id"] . '">
<input type="submit" name="submit" value="Comment"
class="submit">
</form>';
?>
这是此页面的 css：
html {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
overflow-x: hidden;
}
.movie-img {
width: 100%;
top: 85%;
margin-left: -404px;
position: absolute;
}
.movie-name-and-date {
text-align: center;
}
.bio {
position: absolute;
top: 85%;
left: 32%;
float: left;
text-align: left;
width: 600px;
font-size: 20px;
margin-bottom: 10px;
}
iframe {
position: absolute;
top: 20%;
margin-left: -500px;
}
.rating {
position: absolute;
top: 108%;
left: 32%;
font-size: 20px;
margin-bottom: t0px;
}
.rating span {
color: #696969;
}
.reviews {
padding: 10px;
border: 3px solid red;
font-weight: bold;
top: 112%;
position: absolute;
font-size: 20px;
left: 32%;
}
.comment {
resize: none;
top: 125%;
left: 32%;
font-size: 15px;
width: 620px;
height: 50px;
position: absolute;
}
.submit {
top: 134%;
left: 71%;
position: absolute;
}
.rate {
top: 122%;
left: 38%;
position: absolute;
}
.rate-label {
top: 122%;
left: 32%;
position: absolute;
}
.yes-reviews {
left: 32%;
top: 113%;
border: 3px solid black;
width: 590px;
height: 40px;
padding-top: 15px;
padding-left: 30px;
font-size: 20px;
position: absolute;
}
.average-rating {
color: red;
font-weight: bold;
}
.total-reviewed {
left: 50%;
border-left: 1px solid black;
padding-left:15px;
top: 115.5%;
font-size: 20px;
position: absolute;
}
如果我最小化屏幕或在另一台计算机上查看它，一切都会崩溃，如图所示：here
我希望我的网站像这个网站，如果你最小化屏幕，一切都保持不变，但你必须滚动。此外，如果您在 chrome book 上使用堆栈溢出，它看起来与在 mac 上相同。我怎样才能做到这一点？提前非常感谢你！
【问题讨论】：
标签： html css macos screen chromebook