Question

我正在努力让#container举行幻灯片演示和网站描述。但是，我希望说明中的文字保持在幻灯片放映的右侧，直到它变得太紧并在幻灯片放映下移动（所以这样它在平板电脑/手机上看起来也很好）。我怎么能实现这个目标？因为到目前为止，我不得不设计以下内容：

    #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;}

首先，问题在于我不喜欢margin-left：610px，因为幻灯片在调整窗口大小时会改变，所以我必须使用的描述（至少用于我上次检查时）。其次，我相信我必须拥有许多不必要的样式参数，它甚至不能满足我的需求！

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

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...);
    }
};

文本，div和两个吸烟浮动

1 个答案: