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

嗯，您正在做一些事情。首先，当我们谈论使用位置的响应式设计时：绝对会比您想要的要引起更多的麻烦...话虽如此，您可以完全使用Flex Box实现您所要求的。您所处的位置是另一个问题：在您的图像Moviephoto上具有现实性，但您也尝试通过左：100和右：0

来分配绝对位置

我的建议是重新设计您的html和css以利用flexbox，因为flexbox专门用于解决您在问题中所指的响应性问题。如果有太多原因使用绝对位置，则可以选择媒体查询。但是，我的建议是使用display：flex，因为它可以让您使用各种屏幕尺寸的通用性，而不必每隔几步就重构代码。

以下是有关柔韧性盒的资源： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

如何在图像旁边移动文本并使文本响应

1 个答案: