Question

我正在为我正在进行的项目遇到麻烦。我被要求做以下事情：答：所有内容应以最小屏幕尺寸堆叠，图像应为全宽 B.宽度为600px，＆＃34;导航＆＃34;应该在左边，＆＃34;内容＆＃34;在右边 C.宽度为800px时，所有图像应向右浮动，不应超过内容宽度的40％

对于A，我认为堆叠是小屏幕的默认设置，然后我不确定全宽图像？对于B，它只是浮动功能吗？对于C，我不知道它意味着什么，不应该超过40％......＆＃34;

这是我目前的代码：

@media screen {
  img{width:100%;}
}
@media only screen and (min-width:600px){
  nav{float: left;}
  div{float: right;}
}
  @media only screen and (min-width:800px){

Answer 1

您在询问： 800px宽，所有图片应该向右浮动，不应超过内容宽度的40％？

从您的陈述中，内容宽度为800px宽。这意味着：

1. image has property float with right value.
2. image width should not be more than 40% of the content width (800px).

Answer 2

当我想到处理您详细要求的最简单方法时，我会想到Bootstrap Grid System。

一个。堆叠了所有内容的最小屏幕尺寸已经为您处理。包括图片全宽。只需保留应叠加在其自己的列中的图片和内容，并在图片上设置宽度。

B中。通过使用左侧的“.col-sm-5”和“col-sm-7”的预定义Bootstrap Grid类，导航可以轻松地位于左列，右列中的内容。

℃。我只是将浮动设置为百分比作为给定屏幕尺寸的图片大小。即最小宽度：800px /图像宽度：60％，或者如果内容将环绕图像，您可以将它们放在内部网格中。

（注意：您必须稍微自定义您想要的屏幕尺寸的像素宽度，但它会让您朝着正确的方向前进）

我会设置一个包含所需部分的简单网格，并使用列和宽度进行播放，您可以通过重新调整浏览器大小并查看列和行的调整方式进行测试。

您不仅可以满足要求，而且还有许多其他功能可以帮助解决未来的范围蔓延请求。

基本CSS样式表

2 个答案: