Html 使3个div响应而无需媒体查询_Html_Css_Flexbox

Html 使3个div响应而无需媒体查询

html css

Html 使3个div响应而无需媒体查询,html,css,flexbox,Html,Css,Flexbox,我正在尝试使3个div响应，即在桌面视图中，这些div位于行中，我希望在移动视图的列视图中显示它们。我正在使用flexbox 我试过这个 .outerdiv{ 显示器：flex；证明内容：周围的空间；填充：0；柔性包装：包装；保证金：0；对齐内容：居中对齐；文本对齐：居中； } .innerdiv{ 最大宽度：24.296875%；高度：自动； paddingLeft：自动；浮动：左；左：10px；弹性：1；柔性包装：包装；背景：#e3； } 1. 2. 3. 在媒体

我正在尝试使3个div响应，即在桌面视图中，这些div位于行中，我希望在移动视图的列视图中显示它们。我正在使用flexbox

我试过这个

.outerdiv{
显示器：flex；
证明内容：周围的空间；
填充：0；
柔性包装：包装；
保证金：0；
对齐内容：居中对齐；
文本对齐：居中；
}
.innerdiv{
最大宽度：24.296875%；
高度：自动；
paddingLeft：自动；
浮动：左；
左：10px；
弹性：1；
柔性包装：包装；
背景：#e3；
}


1.
2.
3.

在媒体查询中使用

flex direction

.flex容器{
显示器：flex；
背景色：淡蓝色；
}
.flex容器>div{
背景色：#f1f1；
宽度：100px；
利润率：10px；
文本对齐：居中；
线高：75px；
字体大小：30px；
}
@媒体屏幕和屏幕（最小宽度：481px）{
.柔性容器{
弯曲方向：行；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.柔性容器{
弯曲方向：立柱；
}
}


1.
2.
3.

在媒体查询中使用

flex direction

.flex容器{
显示器：flex；
背景色：淡蓝色；
}
.flex容器>div{
背景色：#f1f1；
宽度：100px；
利润率：10px；
文本对齐：居中；
线高：75px；
字体大小：30px；
}
@媒体屏幕和屏幕（最小宽度：481px）{
.柔性容器{
弯曲方向：行；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.柔性容器{
弯曲方向：立柱；
}
}


1.
2.
3.


1.
2.
3.


1.
2.
3.

您可以这样使用：

<main class="wrapper">

  <section class="breweries" id="breweries">
    <ul>
      <li>
        <figure>
          <!-- Photo by Quentin Dr on Unsplash -->
          <img src="https://images.unsplash.com/photo-1471421298428-1513ab720a8e" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Drew Farwell on Unsplash -->
          <img src="https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Rawpixel on Unsplash -->
          <img src="https://images.unsplash.com/photo-1535359056830-d4badde79747?ixlib=rb-1.2.1&auto=format&fit=crop&w=3402&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>
</main>




几十亿

在坍塌的恒星内部制造恒星物质获取星光冒险几十亿个德雷克方程式大脑是智慧的种子？



德雷克方程

另一个来自遥远时代的世界公民，我们的春天从天文学家猎户座的剑般的宇宙海洋海岸而来。



浩瀚的宇宙竞技场

星系——恒星炼金术的灰烬——质数科学——岩石和气体的微尘——大脑是智慧的种子。

使用这个CSS

<style type="text/css">
        /* Typography imported from Google Fonts */

/* Generic styles */
html {
  scroll-behavior: smooth;
}

a {
  background-color: goldenrod;
  text-decoration: none;
  color: white;
  border-radius: .25rem;
  text-align: center;
  display: inline-block;
  transition: all .3s;
}

a:hover {
  opacity: .6;
}

li{list-style: none;}


/* breweries styles */
.breweries {
  padding: 2rem;
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}


    </style>


/*从Google字体导入的排版*/
/*通用样式*/
html{
滚动行为：平滑；
}
a{
背景颜色：黄花；
文字装饰：无；
颜色：白色；
边界半径：.25rem；
文本对齐：居中；
显示：内联块；
过渡：全部3秒；
}
a:悬停{
不透明度：.6；
}
li{列表样式：无；}
/*啤酒厂风格*/
.啤酒厂{
填充：2rem；
}
.啤酒厂>ul{
显示：网格；
网格模板列：重复（自动拟合，最小值（320px，1fr））；
网格间距：1rem；
}
.breweries>ul>li{
边框：1px实心#e2；
边界半径：.5rem；
}
.breweries>ul>li>图{
最大高度：220px；
溢出：隐藏；
边框左上半径：.5rem；
边框右上角半径：.5rem；
位置：相对位置；
}
.breweries>ul>li>figure>img{
宽度：100%；
}
.breweries>ul>li>figcaption{
位置：绝对位置；
底部：0；
背景色：rgba（0,0,0,7）；
宽度：100%；
}
.啤酒厂>ul>li>figcaption>h3{
颜色：白色；
填充：.75rem；
字体大小：1.25rem；
}
.啤酒厂>ul>li>p{
字号：1rem；
线高：1.5；
填充物：1雷姆75雷姆；
颜色：#666666；
}
.breweries>ul>li>a{
填充：.5rem1rem；
保证金：5雷姆；
}

您可以这样使用：

<main class="wrapper">

  <section class="breweries" id="breweries">
    <ul>
      <li>
        <figure>
          <!-- Photo by Quentin Dr on Unsplash -->
          <img src="https://images.unsplash.com/photo-1471421298428-1513ab720a8e" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Drew Farwell on Unsplash -->
          <img src="https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Rawpixel on Unsplash -->
          <img src="https://images.unsplash.com/photo-1535359056830-d4badde79747?ixlib=rb-1.2.1&auto=format&fit=crop&w=3402&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>
</main>




几十亿

在坍塌的恒星内部制造恒星物质获取星光冒险几十亿个德雷克方程式大脑是智慧的种子？



德雷克方程

另一个来自遥远时代的世界公民，我们的春天从天文学家猎户座的剑般的宇宙海洋海岸而来。



浩瀚的宇宙竞技场

星系——恒星炼金术的灰烬——质数科学——岩石和气体的微尘——大脑是智慧的种子。

使用这个CSS

<style type="text/css">
        /* Typography imported from Google Fonts */

/* Generic styles */
html {
  scroll-behavior: smooth;
}

a {
  background-color: goldenrod;
  text-decoration: none;
  color: white;
  border-radius: .25rem;
  text-align: center;
  display: inline-block;
  transition: all .3s;
}

a:hover {
  opacity: .6;
}

li{list-style: none;}


/* breweries styles */
.breweries {
  padding: 2rem;
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}


    </style>


/*从Google字体导入的排版*/
/*通用样式*/
html{
滚动行为：平滑；
}
a{
背景颜色：黄花；
文字装饰：无；
颜色：白色；
边界半径：.25rem；
文本对齐：居中；
显示：内联块；
过渡：全部3秒；
}
a:悬停{
不透明度：.6；
}
li{列表样式：无；}
/*啤酒厂风格*/
.啤酒厂{
填充：2rem；
}
.啤酒厂>ul{
显示：网格；
网格模板列：重复（自动拟合，最小值（320px，1fr））；
网格间距：1rem；
}
.breweries>ul>li{
边框：1px实心#e2；
边界半径：.5rem；
}
.breweries>ul>li>图{
最大高度：220px；
溢出：隐藏；
边框左上半径：.5rem；
边框右上角半径：.5rem；
位置：相对位置；
}
.breweries>ul>li>figure>img{
宽度：100%；
}
.breweries>ul>li>figcaption{
位置：绝对位置；
底部：0；
背景色：rgba（0,0,0,7）；
宽度：100%；
}
.啤酒厂>ul>li>figcaption>h3{
颜色：白色；
填充：.75rem；
字体大小：1.25rem；
}
.啤酒厂>ul>li>p{
字号：1rem；
线高：1.5；
填充物：1雷姆75雷姆；
颜色：#666666；
}
.breweries>ul>li>a{