CSS：删除行

时间：2017-05-24 18:46:48

标签： html css flexbox

这是我的问题：

我有一个Flex容器中的列表，它们被分隔符分隔，如下面的屏幕所示 screen1 问题是，当你调整窗口大小并使其变小时，它们会在不同的行上运行，我想摆脱行的最后一部分中的分隔符，以便其余部分很好地居中。 enter image description here

顺便说一句，我尝试使用边距来制作分隔符，但后来我将问题集中在每个div的大小上。

任何暗示如何用css实现这一目标？

那是我现在的代码

＆＃13;
＆＃13; 
@import "compass/css3";

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
 justify-content: space-around;
  align-items: center;
  
}

.flex-item {


  padding: 5px;
  margin-top: 10px;
  min-width:100px;
  line-height: 150px;
  color: blaclk;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center; 
  opacity: 0.7;
  

}
.flex-item img{
  width: 100%;
}



.separator{
  background: rgb(127, 0, 0);
  background: rgba(192,192,192,.5);
  width: 1px;
height: 100px;


}
＆＃13; 
<div class="flex-container">
<div class="flex-item " ><center><p> 1 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 2 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 3 </p></center></div>
  <div class="separator"></div>
<div class="flex-item " ><center><p> 4 </p></center></div>
 </div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

使用纯CSS我认为这很难（除非你想使用媒体查询来定义可能在不同浏览器中变化的每一种情况等），所以我建议在这里使用js（jQuery）。见下面的例子。

创建一个函数separatorHandler()，检查每个项目的顶部位置，如果它高于新行中的最后一个项目，则隐藏前一个分隔符，否则显示前一个分隔符。

同样<center>不再支持HTML5，只需使用<div class="centered">这样的类与css text-align: center; 

$(window).resize(function() {
  separatorHandler();
}).trigger('resize');

function separatorHandler() {
  var lastItemTop = $('.flex-item').first().position().top;
  $('.flex-item').each(function() {
    if ($(this).position().top > lastItemTop) {
      lastItemTop = $(this).position().top;
      $(this).prev('.separator').hide();
    } else {
      $(this).prev('.separator').show();
    }
  });
}
@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  padding: 5px;
  margin-top: 10px;
  min-width: 250px;
  line-height: 150px;
  color: blaclk;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  opacity: 0.7;
}

.flex-item img {
  width: 100%;
}

.flex-item:nth-child(2n) {
  background: red;
}

.separator {
  background: rgb(127, 0, 0);
  background: rgba(192, 192, 192, .5);
  width: 5px;
  height: 100px;
}

.centered {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item ">
    <div class="centered">
      <p> 1 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 2 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 3 </p>
    </div>
  </div>
  <div class="separator"></div>
  <div class="flex-item ">
    <div class="centered">
      <p> 4 </p>
    </div>
  </div>
</div>

答案 1 :(得分：1)

您可以在每个断点处使用nth-of-type()来定位元素并更改其样式。

在笔中我用手写笔书写它可能更容易理由：https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100

但重点是，

  

......我不知道断点，我的意思是它取决于宽度。我不   非常了解如何在这种情况下使用它

在某些时候 - 对于布局的某些部分，您必须控制并做出决定。什么是断点，为什么这些是根据屏幕尺寸和内容更改布局的正确时间。计算机和flexbox真的很酷 - 但如果你不能构建一个逻辑系统让他们解释 - 它们就毫无价值。只要看起来“正确”，浏览器就无法决定何时在盒子上放置边框。我知道这不是理想的，但这是我最终在生产中使用的 - 因为没有任何其他方式。您可以使用JavaScript检查列并应用类 - 但这仍然就是这样。

.thing-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.thing {
  flex-basis: 100%;
}
.thing:not(:last-of-type) {
  border-bottom: 5px solid #00f;
}
@media (min-width: 700px) {
  .thing {
    flex-basis: 50%;
  }
  .thing:not(:last-of-type) {
    border-bottom: 0;
  }
  .thing:nth-of-type(2n+1) {
    border-right: 5px solid #800080;
  }
}
@media (min-width: 1000px) {
  .thing {
    flex-basis: 25%;
  }
  .thing,
  .thing:nth-of-type(2n+1) {
    border-right: 5px solid #008000;
  }
  .thing:nth-of-type(4n + 4) {
    border-right: 0;
  }
}

答案 2 :(得分：1)

如果您对纯CSS解决方案感兴趣，我建议为此目的使用:after伪类作为分隔符。然后:last-of-type和:nth-child选择器用于删除:after伪元素的显示。

如此纯粹的CSS解决方案 - 有点不实用，因为您需要指定所需的所有媒体查询（当然，它可以工作）。使用JavaScript制作起来要容易得多。

CSS：

.flex-container {
    display: flex;
    /* ... */
    flex-flow: row wrap; 
}

.flex-item {
    display: block;
    /* ... */
    position: relative;
}

.flex-item:after {
    content: "";
    display: block;
    background-color: white;
    width: 2px;
    height: 100%;
    position: absolute;
    right: -20px;
    top: 0;
}

/* funny part */
.flex-item:last-of-type:after {
    display: none;
}
@media (max-width: 365px) {
    .flex-item:after {
        display: none;
    }
}
@media (min-width: 366px) and (max-width: 549px) {
    .flex-item:nth-child(2n):after {
        display: none;
    }
}
@media (min-width: 550px) and (max-width: 727px) {
    .flex-item:nth-child(3n):after {
        display: none;
    }
}

和HTML：

<div class="flex-container">
    <div class="flex-item"><p>Foo</p></div>
    <div class="flex-item"><p>Bar</p></div>
    <div class="flex-item"><p>Bar</p></div>
    <div class="flex-item"><p>Bar</p></div>
</div>

这是工作小提琴：https://jsfiddle.net/9wrL5oeL/

答案 3 :(得分：0)

<div id="list">
    <div class="item">
      <p>1</p>
    </div>
    <div class="bullet">●</div>
    <div class="item">
         <p>2</p>
  </div>
    <div class="bullet">●</div>
    <div class="item">
         <p>3</p>
      </div>
   <div class="bullet">●</div>
   <div class="item">
      <p>4</p>
   </div>
   <div class="bullet">●</div>
   <div class="item">
      <p>5</p>
   </div>
   <div class="bullet">●</div>
    <div class="item">
     <p>6</p>
    </div>
  </div>


<style>
#list{
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
      flex-wrap: wrap;
    }
.item{
  margin: 0 20px;
}
</style>


    <script>
$(window).resize(function() {
            separatorHandler();
        }).trigger('resize');

        function separatorHandler() {
            let widthElement = $('#list').outerWidth();

            $('.bullet').each(function() {
                $(this).show();
                if($(this).position().left < 10 || $(this).position().left > widthElement - 15) {
                    $(this).hide();
                }


            });
        }
        </script>

添加一些更新。我正在搜索所有子弹元素。接下来，如果每个元素的位置比元素宽度的左或右少，则每个元素都占据位置。

相关问题
最新问题