时间戳

首页 > 解决方案 > 向左阻塞，向右内联

html - 向左阻塞，向右内联

问题描述

我有一系列跨度元素。我需要他们显示内联，直到到达应该“换行”的元素。“包装”元素之后的元素应该从那里继续显示内联。换句话说，我希望一个元素显示为就其block之前的内容设置为，但显示为就其后inline的内容而言。与执行 cr/lf 一致。

解决方案必须仅基于样式。最好对示例代码中的“startWord”样式进行唯一的样式更改。

下面的示例是我目前拥有的。Word 1、Word 2 和 Word 3 应该像它们一样显示内联。Word 4 应该像它一样显示在 Word1 下方的页面下方。由于 Word4 显示被设置为阻止，Word 5 和 Word 6 从 Word4 向下显示，但我希望它们立即显示在 Word4 之后，就好像 Word4 显示是inlineor一样inline-block。

任何援助将不胜感激。

    <style>
        .word {
            border:1px solid steelblue;
        }
        .startWord {
            border:1px solid red;
            display:block;  // I want something else here that allows content to display inline after it.
        }

    </style>
    <div>
        <span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
    </div>

标签： htmlcss

解决方案

您可以使用floatand来做到这一点clear，就像我在下面所做的那样：

.word {
  float: left;
}
.startWord{
  border: 1px solid red;
  float: left;
  clear: left;
}
.startWord + .word {
  /* here any styles for the element which follows the wrapped element could go*/
}
<div>
  <span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>

如果需要，您可以添加width: 100%以.startWord使其像块一样全宽。

推荐阅读