对使用 SPAN 与 DIV 和自然流感到困惑

Question

我一直在尝试创建一个带标题的 blinking LED（LED 和标题之间的相对位置应始终保持不变）...我希望 LED 对齐当页面足够宽时彼此相邻，当页面缩小时堆叠（即，LED 应该响应）。

我对页面最大化时的相对定位和行为感到满意，但我无法实现响应行为...我尝试使用 DIV、SPAN，inline-block 和浮动 ...

我想我对他们如何互动感到困惑。

关于如何approach/solve这个问题有什么建议吗？

CSS 在这里：

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
  position: relative;
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

HTML 在这里：

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led" style="display:inline-block">
        <span class="led_caption"> Caption </span>
    </div>
</div>

Codepen link 在这里：http://codepen.io/vpappano/pen/WGYpzm

*** 编辑

我（希望）使用了 Kodie Grantham 和 Damiano Celent 的一些 suggestions/recommendations。我创建了以下结构：

LED -- 有一个 'bulb' 和一个 'caption' -- 见下文

.led_bulb {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 10px 40px 20px 65px;
   background: #f2ffe6;
   position: relative;
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    top: 30px;
    left: -300%;    
}

.led {
    width: 160px; 
    height: 70px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px;
}

@media (max-width: 400px) {
   .led {
     display: block; 
     margin: 0 auto;
   }
}

@media (min-width: 401px) {
   .led {
     display: inline-block; 
   }
}

LED 支架 -- 容纳 2 个 LED -- 见下文 ...如果有足够的空间，LED 支架应相互显示 'next'（屏幕将总共显示 4 个 LED）...

/*   */
.led_holder
{
    position: relative; 
    margin: 10px auto; 
    text-align:center;
}

@media (max-width: 800px) {
   .led_holder {
     /* ??? */
     margin: 0 auto;
   }
}

@media (min-width: 801px) {
   .led_holder {
     /* ??? */
   }
}

单个 LED 灯座反应灵敏（2 个 LED ==> 1 个 LED 没问题）。

我正在尝试为 2 个 LED 灯座的组合获得相同的行为。响应进程将是：4 个 LED ==> 2 个 LED ==> 1 个 LED

我以为我已经掌握了窍门...但浏览器一直证明我错了...

可以在这里找到修改后的 CodePen ... http://codepen.io/vpappano/pen/PGxKaB

谢谢 :-) :-)

*** 编辑——已修复！！ :-)

全部，

感谢您的帮助和提示..我修改了代码...

我最初有

@media (max-width: 800px) {
   .led_holder {
     display: block; 
     margin: 0 auto;
   }
}

@media (min-width: 801px) {
   .led_holder {
     display: inline-block; 
   }
}

但是我忘了添加

.led_holder {
   position: relative;
}

:-) :-)

Answer 1

要完成此操作，您需要使用 media queries。

CSS:

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
   position: relative;
   display: inline-block;
}

@media (max-width: 400px) {
   .led {
     display: block; 
   }
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

HTML:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
</div>

Answer 2

我已经添加了flexbox方案，只要你不关心史前和古老的浏览器，就可以了。

让我礼貌地提醒您不要像您那样在标记中使用内联样式，只是不要这样做。

学习使用媒体查询：

@media screen and (min-width: 980px) {}

这是语法，我总是一个元素一个元素地做，首先建立大屏幕默认值，然后对元素进行媒体查询，因为有些元素不需要调整而且更容易阅读.

Flexbox 是你必须要读的东西，每个人都必须要读，它是响应式设计的未来技术。

作为一个老派的后备方案，您可以求助于大屏幕显示元素内嵌块和小屏幕显示块（在您的情况下）。

代码如下：

.main{width: 500px; 
height: 100px; margin: 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;}

这只是 flexbox 包装器的代码，您需要一个 flexbox 包装器，这使得子元素显示为 flex。

Link 转笔:

http://codepen.io/damianocel/pen/gwQWPq

Answer 3

我改变了一些 html 布局，如下所示，并为此使用了 flexbox，请看一下

<div class="flex_row">
    <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
   <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
    <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
      <div class="flex_box">
        <span class="led"></span>
        <p> Caption </p>
    </div>
   </div>

CSS

body{padding:0; margin:0; line-height: 1.1;}
.flex_row
{
     display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
      -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
   -webkit-justify-content:center; /* Safari */
  justify-content:        center;
   -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
    -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
     width: 80%;
    padding: 0 10%;
}
.flex_box
{
    text-align:center;
}
.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   background: #f2ffe6;
   display:inline-block;
}
@media screen and (max-width: 568px) {
  .flex_row
{
    -webkit-flex-direction: column;
    flex-direction: column;
     width: 98%;
    padding: 0 1%;
}
.flex_box
{
    align-self:center;
}
}

要处理更多屏幕，您需要添加更多媒体屏幕

对使用 SPAN 与 DIV 和自然流感到困惑

Confused about using SPAN vs DIV and natural flow

html

css

responsive

*** 编辑

*** 编辑——已修复！！ :-)