12

我有一个由步骤组成的程序。一些步骤附有图像。 

    <p class="imagefloatright"><img src="step 1.png"/></p>
    <ol>
        <li>
          <p>Step 1</p>
          <p class="imagefloatright"><img src="step 2.png"/></p>
        </li>
        <li>
          <p>Step 2</p>
          <p>Step 3</p>
        </li>
    </ol>

和我的 CSS：

p.imagefloatright img {
    float: right;
    clear: both;
}

这是默认输出。图像不会与它们所属的步骤保持一致，步骤 2 的文本放在图像 1 旁边：

在此处输入图像描述

我希望属于第 2 步的图像与第 2 步垂直对齐：

在此处输入图像描述

过去，我在 XSL-FO 中通过在每个浮动图像之前插入一个高度 = 0 的全宽块来实现我想要的结果。

我可以使用 CSS 命令实现我想要的布局吗？或者在将 CSS 应用于 HTML 之前，我是否需要在 HTML 中插入一个块？

4

10 回答 10

2

清除包含动态内容的浮动，即。图像可以具有动态高度，您需要清除父元素本身。

.imagefloatright {
  clear: both;
}
.imagefloatright img {
  float: right;
}

这意味着您需要clear在包含浮动元素的元素上使用。

为简洁起见，我将其重命名为：

.clearfix {
  clear: both;
}
.float-right {
  float: right;
}

HTML

<p class="clearfix"><img class="float-right" src="step 1.png"/></p>
<ol>
    <li>
      <p>Step 1</p>
      <p class="clearfix"><img class="float-right" src="step 2.png"/></p>
    </li>
    <li>
      <p>Step 2</p>
      <p>Step 3</p>
    </li>
</ol>

这是一个演示。

于 2018-09-11T21:49:53.747 回答
1

这是使用 flexbox 的简单方法：

ol {
  list-style: none;
  padding:0;
  margin:0;
}

li {
  display: flex;
  /*for illustration*/
  border:1px solid;
  padding:5px;
}

img {
  margin-left: auto;
}
<ol>
  <li>
    Step 1
    <img src="https://placehold.it/100x100">
  </li>
  <li>
    Step 2
  </li>
  <li>
    Step 3
  </li>
  <li>
    Step 4
    <img src="https://placehold.it/100x100">
  </li>
</ol>

于 2018-09-07T10:57:31.707 回答
1

如果每个有图像的步骤只有一个图像，并且图像不会被多个步骤共享，您可以编写一个选择器让以下步骤清除每个浮动图像，但它非常严格：

p.imagefloatright img {
  clear: both;
  float: right;
}

p.imagefloatright + p:not(.imagefloatright) + p {
  clear: both;
}
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p class="imagefloatright"><img src="https://placehold.it/100x100"/></p>
<p>Step 2</p>
<p>Step 3</p>

如果步骤和图像之间没有严格的一对一关系，那么您需要将clear属性策略性地应用于特定步骤。

于 2018-09-07T08:29:30.290 回答
1

解决方案 1：使用 Flex

我建议使用它flex，justify-content: space-between唯一的缺点是如果您支持旧版浏览器，例如 IE10，那么您可以查看https://caniuse.com/#search=flex了解更多信息。

至于space-between根据MDN简单

项目沿主轴均匀分布在对齐容器内。每对相邻项目之间的间距是相同的。第一项与主开始边缘齐平，最后一项与主结束边缘齐平。

意思是，它将使第一个孩子与父母的开头对齐，最后一个孩子与结尾对齐，剩余空间在其余孩子之间平均分配（如果存在），如果是，这将为您提供所需的img布局无论有多少个孩子，总是最后一个孩子div。

就个人而言，我会发现 usingflex是在页面上“定位”和“布局”不同元素的最方便和最简洁的方法之一。

你可以找到下面的代码和一个工作小提琴here

HTML

<ol class="step-list">
  <li class="step">
    <p>Step 1</p>
    <img src="https://placehold.it/150x150?text=Step1" alt="">
  </li>
  <li class="step">
    <p>Step 2</p>
  </li>
  <li class="step">
    <p>Step 3</p>
  </li>
  <li class="step">
    <p>Step 4</p>
    <img src="https://placehold.it/150x150?text=Step4" alt="">
  </li>
</ol>

CSS

.step-list {
  list-style: none;
}

.step {
  display: flex;
  justify-content: space-between;
}

解决方案 2：使用浮点数

您也可以继续使用float，但在这种情况下，您需要清除p而不是清除img并浮动它。

由于包含元素的所有元素都是浮动的，因此clearfix在标签中添加一个很重要，不要折叠成任何东西，您可以在此处li找到更多信息。

所以你的代码会喜欢这个，你可以在这里找到一个工作小提琴

HTML

<ol class="step-list">
  <li class="step">
    <p>Step 1</p>
    <img src="http://placehold.it/150x150?text=Step1" alt="">
  </li>
  <li class="step">
    <p>Step 2</p>
  </li>
  <li class="step">
    <p>Step 3</p>
  </li>
  <li class="step">
    <p>Step 4</p>
    <img src="http://placehold.it/150x150?text=Step4" alt="">
  </li>
</ol>

CSS

.step-list {
  list-style: none;
}

.step img {
  float: right;
}

.step p {
  float: left;
}

/*This is what is called a clearfix solution, for the floating problem*/
.step::after {
  content: "";
  display: block; 
  clear: both;
}

如果有任何不清楚的地方，请随时问我更多问题。

于 2018-09-12T11:38:21.753 回答
1

您不应该clear在元素上使用属性p，而是在要停止浮动的地方创建另一个元素。

p.imagefloatright img {
    float: right;
}

.clear {
    clear:both;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<div class="clear"></div>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<div class="clear"></div>

顺便说一句，这是一个代码片段，显示了您的步骤的更好布局（从我的角度来看），这更合乎逻辑，每个步骤都是一个带有正确定位的图像和文本的块。

p.imagefloatright {
    clear:both;
}

p.imagefloatright img {
    float: right;
}
<p class="imagefloatright">
  Step 1
   <img src="http://via.placeholder.com/80x80"/>
</p>

<p class="imagefloatright">
  Step 2
  <img src="http://via.placeholder.com/80x80"/>
</p>

如果您仍然希望在单独的p元素中包含文本，您可以将所有步骤作为一个div元素，其中包含正确样式的段落和图像。我也在元素上应用display:inline-block以p防止它占据整个宽度。您可以执行相同操作或使用span代替p.

.imagefloatright {
    clear:both;
}

.imagefloatright p {
    display: inline-block;
    margin: 0;
}

.imagefloatright img {
    float: right;
}
<div class="imagefloatright">
  <p>Step 1</p>
   <img src="http://via.placeholder.com/80x80"/>
</div>

<div class="imagefloatright">
  <p>Step 2</p>
  <img src="http://via.placeholder.com/80x80"/>
</div>

于 2018-09-07T08:22:17.930 回答
0

after您可以在标签中使用伪元素li来获取浮动元素的高度。此外，您必须指定您只想使用>选择器浮动 li 标记内的元素。

ol {
  padding: 0;
}

li {
  padding: 10px;
  list-style: none;
  background: #eee;
  margin: 10px 0;
  width: auto;
}

li:after {
  content: '';
  display: table;
  clear: both;
}

li > p {
  width: 25%;
  float: left;
}

p {
  margin: 0;
}
<p><img src="http://fpoimg.com/300x300"/></p>
<ol>
  <li>
    <p>Step 1</p>
    <p><img src="http://fpoimg.com/300x300?text=Step1"/></p>
  </li>
  <li>
    <p>Step 2</p>
    <p>Step 3</p>
  </li>
</ol>

于 2018-09-14T06:55:49.603 回答
0

为什么不用伪元素？

p, .imagefloatright img { margin: 0 0 .25em; }

.imagefloatright img {
  float: right;
}

.imagefloatright::before {
  clear: both;
  content: '';
  display: block;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<p>Step 3</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 4</p>
<p>Step 5</p>

你必须玩弄::before伪::after元素。另一种解决方案可能如下：

p, .imagefloatright img { margin: 0 0 .25em; }

.imagefloatright img {
  float: right;
}

.imagefloatright + p::after {
  clear: both;
  content: '';
  display: block;
}
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 2</p>
<p>Step 3</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p>Step 4</p>
<p>Step 5</p>

以下所有步骤应该属于图像还是不应该？这取决于 ;）

于 2018-09-07T08:34:55.627 回答
0

这样做很容易。当您使用 css 浮动属性时，您必须对其父元素使用溢出。在你的情况下：

p.imagefloatright{
   overflow: auto;
}

必须解决问题。阅读更多关于https://www.w3schools.com/css/css_float.asp

于 2018-09-12T06:24:55.373 回答
0

你可以用这个

 <p>
    <span class="left">1</span>
       <img class="right"  src="http://via.placeholder.com/90x90" alt="">
  </p>

   <p>
    <span class="left">2</span>
       <img class="right"  src="http://via.placeholder.com/90x90" alt="">
  </p>

p{
  display:inline-block;
    margin-bottom:5px;
    width:100%;
}
p .left{
  float:left;
  margin-bottom:55px;
}
p .right{
 float:right;
}

https://jsfiddle.net/jlbarcelona/vcmdo7uy/106/

于 2018-09-07T08:57:56.993 回答
0

clearfix应该有帮助。：

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

和html：

<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 2</p>
<p>Step 3</p>
于 2018-09-07T08:26:36.530 回答