html - 如何将文本移动到图像旁边并使文本响应

Question

我一直在尝试将一些文本移动到图像的右侧并使文本具有响应性，因此如果屏幕比我小的人访问该站点，文本将调整大小以适合屏幕而不是相互重叠它现在可以(但不与概要重叠，不知道为什么那是唯一有效的)

我的图文代码:

<link id='stylecss' type="text/css" rel="stylesheet" href="css/style.css">



<?php
$title = "WatchFlix";
$style="css/style.css";
/*include is a php fuction which place all codes(php, html) at the location where the include statement is placed.*/
?>
<?php
include("head.php")
?>
<?php
include("nav.php")
?>
<main>
<h2 class="movieheading"> Game of Thrones </h2>
<img class="moviephoto" src="gotimage.jpg" alt="friends"/>

<div class="rating">
<h4> Rating: <span style ="font-weight:normal;">MA 15+</span></h4>
</div>

<div class="release">
<h4> Release Date: <span style ="font-weight:normal;">17 April 2011</span> </h4>
</div>

<div class="cast">
<h4> Cast: <span style ="font-weight:normal;">Peter Dinklage, Lena Headey, Emilia Clarke, Kit Harington, Sophie Turner, Maisie Williams</span></h4>
</div>

<div class="category">
<h4> Category: <span style ="font-weight:normal;"> Action/Adventure/Drama/Fantasy/Romance </span> </h4>
</div>

<div class="moviedetail">
<h4>T.V Show Details:</h4>
</div>

<div class="synopsis">
<p>Years after a rebellion spurred by a stolen bride to be and the blind ambitions of a mad king, Robert of the house Baratheon sits on 
the much desired Iron Throne. In the mythical land of Westeros, nine noble families fight for every inch of control and every drop 
of power. The King's Hand, Jon Arryn, is dead. And Robert seeks out his only other ally in all of Westeros, his childhood friend 
Eddard Stark. The solemn and honorable Warden of the North is tasked to depart his frozen sanctuary and join the King in the 
capital of King's Landing to help the now overweight and drunk Robert rule. However, a letter in the dead of night informs Ned 
that the former Hand was murdered, and that Robert will be next. So noble Ned goes against his better desires in an attempt to 
save his friend and the kingdoms. But political intrigue, plots, murders, and sexual desires lead to a secret that could tear the 
Seven Kingdoms apart. And soon Eddard will find out what happens when you play the Game of Thrones.</p>
</div>

<br><br><br>

</main>

<form action="cart.php" method="post">
   Game Of Thrones Season 1
   <input type = "hidden" name = "id" value = "M01" />
   <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
   <button class="prod" id="minus">−</button>
<input type="number" name="qty" value="0" id="qty" min="0" max="15"/>
<button class="prod" id="plus">+</button>
<br><br>
<button class="prod" type="submit"> Submit</button>
   </form>



 <script>
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
 event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < inputField.min) {
inputField.value = inputField.min;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > inputField.max) {
    inputField.value = inputField.max;
  } else {
    inputField.value = currentValue;
  }
});
</script>


</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<?php
include("footer.php")
?>

问题的相关CSS:

.movieheading {
    position:absolute;
    margin-top:25px;
    left:470;
    right:0;
}

.moviephoto {
    position:relative;
    margin-top:25px;
    max-width:100%;
    left:100;
    right:0;
}

div.synopsis {
    position: float;
    margin-top:52px;
    left:400px;
    right:100px;
    width:500px;
    height:150px;
}

div.moviedetail {
    position:absolute;
    margin-top:150px;
    left:470;
    right:500;
    display:inline-block;
}

div.rating {
    position:absolute;
    margin-top:35px;
    left:470;
    right:0;
    display:inline-block;
}
div.release {
    position:absolute;
    margin-top:55px;
    left:470;
    right:0;
    display:inline-block
}

div.cast {
    position:absolute;
    margin-top:75;
    left:470;
    right:0;
    display:inline-block
}

div.category {
    position:absolute;
    margin-top:95px;
    left:470;
    right:0;
    display:inline-block;
}

Answer 1

好吧，你有一些事情要做。首先，当我们谈论使用 position: absolute 的响应式设计时，总是会比你想要的更让人头疼……也就是说你可以使用 flex box 实现你所要求的。另一个问题是你有 position: realtive 在你的图像 moviephoto 上，但你也试图通过 left: 100 和 right:0 分配绝对定位

我的建议是修改您的 html 和 css 以利用 flexbox，因为它旨在专门解决您在问题中提到的响应问题。如果有特定原因需要如此频繁地使用绝对位置，那么媒体查询是您的另一种选择。但是，我的建议是使用 display:flex，因为它可以让您处理各种屏幕尺寸的通用性，而不必每隔几步屏幕尺寸就重构代码。

这里有一些关于 flex box 的资源: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox