短信，潜水器和两个冒烟的浮子

Question

我正在尝试让一个#容器包含一个幻灯片和网站描述。然而，我希望描述中的文本保持在幻灯片的右侧，直到它变得太紧并在幻灯片下移动（这样在平板电脑/手机上也很好看）。我怎样才能做到这一点？因为到目前为止，我不得不设计以下样式：

    #container {
     height: 900px;
     position: relative;
     width: 98%;
     right: 1%; left: 1%;}
    #slideshow {
     width: 650px;
     height: 450px;
     float:left;
     position: absolute;
     left: 1%;
     overflow: hidden;}
    #description-box {
     position: absolute;
     right: 1%;
     float: right;
     margin-left: 15px;}
    p.description {
    margin-left: 610px;
    margin-right: 1%;
    text-align: justify;}

首先，问题是我不喜欢剩下的页边空白：610px是我必须使用的描述，因为幻灯片在调整窗口大小时发生了变化（至少在上次检查时是这样）。其次，我相信我有很多不必要的造型参数，它甚至没有达到我需要的效果！

所以，我的问题是：如果有足够的空间，我怎么能让幻灯片和描述框并排放置，但当调整大小时，让描述框在幻灯片下移动，而不会让文本看起来奇怪和平庸？

Answer 1

您应该使用媒体查询：

<!-- you can use max-width or min-width it all depends on the size of the mobile device-->
@media screen and (max-width: 300px) {
    #description-box {
        position: (insert relative or...);
    }
};