Fatal编程技术网
  • html/
  • Html 容器列在小屏幕上离开屏幕

Html 容器列在小屏幕上离开屏幕

html css layout

Html 容器列在小屏幕上离开屏幕,html,css,layout,flexbox,Html,Css,Layout,Flexbox,我正在尝试创建一个3列产品目录，目的是在所有屏幕大小上显示3列，无论屏幕有多小 在大到中等大小的屏幕上，它似乎工作得很好。当屏幕变小时，所有列都会调整大小并缩小。但是，在小屏幕上，列会从屏幕中消失 这是我被绊倒的w3school工作表的链接 以下是完整代码： <!DOCTYPE html> <html> <head> <style> .products { display: flex; width: 80%; margin-right: aut

我正在尝试创建一个3列产品目录，目的是在所有屏幕大小上显示3列，无论屏幕有多小

在大到中等大小的屏幕上，它似乎工作得很好。当屏幕变小时，所有列都会调整大小并缩小。但是，在小屏幕上，列会从屏幕中消失

这是我被绊倒的w3school工作表的链接

以下是完整代码：

<!DOCTYPE html>
<html>
<head>
<style>

.products {
display: flex;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
}

.product {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: arial;
  margint-left: 10px;
  margin-right: 10px; 
}

.price {
  color: grey;
  font-size: 22px;
}

.product button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.product button:hover {
  opacity: 0.7;
}
</style>
</head>

<body>
<div class="products">

  <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>

  <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>

  <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>
  
</div>

<div class="products">

   <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>

  <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>

  <div class="product">
    <img src="/w3images/jeans3.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Tailored Jeans</h1>
    <p class="price">$19.99</p>
    <p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem        jeamsun denim lorem jeansum.</p>
    <p><button>Add to Cart</button></p>
  </div>
  
</div>

</body>
</html>


.产品{
显示器：flex；
宽度：80%；
右边距：自动；
左边距：自动；
边缘顶端：40px；
}
.产品{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
文本对齐：居中；
字体系列：arial；
左边缘：10px；
右边距：10px；
}
.价格{
颜色：灰色；
字体大小：22px；
}
.产品按钮{
边界：无；
大纲：0；
填充：12px；
颜色：白色；
背景色：#000；
文本对齐：居中；
光标：指针；
宽度：100%；
字号：18px；
}
.产品按钮：悬停{
不透明度：0.7；
}
定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车
小型设备中不允许收缩列的问题是h1。您需要为小型设备设置最小值，为大型设备设置最大值，并将首选值从小型更改为大型。为此，您可以使用“字体大小：钳形（最小、首选、最大）”

.product h1{字体大小：夹具（14px，5vw，32px）；}

.products{
显示器：flex；
宽度：80%；
右边距：自动；
左边距：自动；
边缘顶端：40px；
}
.产品{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
文本对齐：居中；
字体系列：arial；
左边距：10px；
右边距：10px；
}
.价格{
颜色：灰色；
字体大小：22px；
}
.产品按钮{
边界：无；
大纲：0；
填充：12px；
颜色：白色；
背景色：#000；
文本对齐：居中；
光标：指针；
宽度：100%；
字号：18px；
}
.产品按钮：悬停{
不透明度：0.7；
}
.产品h1{
字体大小：夹钳（14px，5vw，32px）；
}

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车

定制牛仔裤

19.99美元

一些关于牛仔裤的文字。超薄舒适的lorem ipsum lorem jeansum。Lorem jeamsun牛仔裤Lorem jeansum

添加到购物车
您可以尝试减小较小屏幕的字体大小。1。您想将这三列相邻显示还是在一个小屏幕上显示它们是否可以在彼此下方显示（不是2+1，而是1+1+1）？2.默认情况下，单词“裁剪”具有固定宽度。如果您不说可以将单词拆分成几行，或者带有产品的框可以转到下一行，它将移出屏幕。3英寸的产品，您还有余量[t]-左。4.您知道边距、填充等的简短语法吗：
margin:top-right-bottom-left
或
margin:top\u-bottom-left\u-right
。行数越少，在我的文档中可读性越好opinion@fun2life谢谢你的评论，我真的明白在小屏幕上显示它们会更好（不是2+1，而是1+1+1）。然而，在我的实际站点中，它有大约80种产品，所以，如果它互相显示，它可能是一个非常长的产品目录页面，用于在移动屏幕上永远向下滚动生命。我只想通过每行显示3个产品来简化它。我可能只会在小屏幕上显示带有图片的产品名称，并在客户单击产品时打开详细信息。您必须使用媒体断点在大屏幕上显示它，在小屏幕上隐藏它，然后使用javascript切换显示状态。但它是通用的，减少字体大小w