Question

我正在尝试使用custombox.js设计一个包含3个“页面”的信息和教学欢迎模式框

模态出现在屏幕中间，然后我需要在模态中间显示内容，左边是前一个按钮，右边是一个显示进度的页脚。

我使用CSS网格布局成功完成了此操作，但许多用户没有支持此功能的浏览器。我无法弄清楚如何使用普通的CSS ...

这是我的HTML

<div id="modal">
    <div id="leftNnav">
        <i id="leftNnavImage" class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>

    <div id="modalContent1" class="modalContent activeModalContent">
        <img id="modalContentMedia" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"/>
        content text goes here, lots and lots and lots and lots and lots and lots more
    </div>

    <div id="modalContent2" class="modalContent">
        Content2 = YT Video
    </div>

    <div id="modalContent3" class="modalContent">
        Content3 = text
    </div>

    <div id="rightNnav">
        <i id="rightNnavImage" class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>

    <div id="modalFooter">
            <svg height="40" width="40">
                <circle id="circle1" class="circle activeCircle" cx="20" cy="20" r="10"></circle>
            </svg>
            <svg height="40" width="40">
                <circle id="circle2" class="circle" cx="20" cy="20" r="10"></circle>
            </svg>
            <svg height="40" width="40">
                <circle id="circle3" class="circle" cx="20" cy="20" r="10"></circle>
            </svg>
        </div>
</div>

https://jsfiddle.net/oppt6v9j/15/

但是这种方式最终真的很混乱，文字溢出而且它感觉不像是正确的做事方式，我觉得我错过了一些非常明显的东西。我知道我可以使用媒体查询调整图像大小，所以没关系，但我不确定如何管理文本。

非常感谢任何有关如何在CSS中设计此模式的帮助！

Answer 1

如果你对齐组件有问题，我建议如下

.right { float: right; }
.left { float: left; }
.modal { display: flex; }
.modalContent { margin: auto; }

我认为使用ID作为CSS选择器是不好的做法。

希望它有所帮助。

Answer 2

是的，这是一个艰难的，因为我不知道盒子的确切尺寸（你使用很多位置：绝对）。我想它会因屏幕尺寸而异，但你的图像有一个高度/宽度设置（300px×150px），所以我专注于那个尺寸。

注意这不是一个“结束一切都是”的答案，它不会解决太阳下的每个用例，而是回答原来的问题：

但这种方式最终真的很混乱，文本溢出而且它只是感觉不是正确的做事方式，我觉得我是缺少一些非常明显的东西。

这是通过提供一种思考方式而不是一个明确的答案来实现的。

解决方案

你使用了很多绝对位置，这意味着你必须使用很多魔法数字。尝试将它们转换为相对位置。

文本非常简单，您应该将其包含在<p>标记中，如下所示：

<p>
     Content text goes here, lots and lots and lots and lots and lots and lots more
</p>

并适当地设计它（盒子填充/角落等）：

p {
  color: #001818;
  padding-right: 40px;
}

图像也是如此：

#modalContentMedia{
 width: 300px;
 height: 150px;
 margin-left: 15px;
}

而且我不确定你想要箭头的位置（它们现在位于盒子的中心）但是我可以想象你想要它们位于图像的中心。为此，请使用：

#leftNnav{
  position: absolute;
  cursor: pointer;
  z-index: 20;
  padding-left: 10px;
  left: 5px;
  top: calc(50% - 40px);
}

#rightNnav{  
  position: absolute;
  cursor: pointer;
  z-index: 20; 
  padding-right: 10px;
  right: 5px;
  top: calc(50% - 40px);
}

这使整个事情看起来更整洁：

通过说明我将如何开始解决这个问题，我已经展示了修复3个主要内容（文本，图像位置不居中，箭头）并相信您将能够自己学习并解决其余问题。< / p>

带有上一个/下一个按钮的欢迎模式的布局

2 个答案:

解决方案