Question

我正在尝试实现类似于附加图像的布局。看起来很好，就像我在浏览器中显示的那样，但是当我在移动设备/平板设备上测试时，p标签的间距最终没有正确显示 - 我认为这是因为我使用的是硬编码宽度span标签和p标签占用多行。

是否可以以响应方式实现附加的图像布局？如果是这样我该怎么做呢？

我尝试使用％和EM代替px，结果相似。

Desired layout

到目前为止我写的HTML是：

         <h2>Lorem Ipsum </h2>  
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>
    <h4>
       <span style="display:inline-block; width: 200px;"></span>           
        or
    </h4>
    </br>
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>

    <h2>
        <span style="display:inline-block; width: 550px;"></span>
        Lorem Ipsum
    </h2>
    <p>
        <span style="display:inline-block; width: 600px;"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
    </p>
    <p>     
    <span style="display:inline-block; width: 663px;"></span>
    Lorem Ipsum
    </p>
    <p>
        <span style="display:inline-block; width: 650px;"></span>
        Lorem ipsum dolor sit amet  
    </p>

Answer 1

首先，你最好通过这种方式来实现类似于你想要的东西：

.indent-1 {
  margin-left: 2.5%;
}
.indent-2 {
  margin-left: 5%;
}
.indent-3 {
  margin-left: 7.5%;
}
.indent-4 {
  margin-left: 10%;
}
.indent-5 {
  margin-left: 12.5%;
}
.indent-6 {
  margin-left: 15%;
}
.indent-7 {
  margin-left: 17.5%;
}
.indent-8 {
  margin-left: 20%;
}
.indent-9 {
  margin-left: 22.5%;
}

<h2>Lorem Ipsum </h2> 
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>

CodePen使用LESS：http://codepen.io/anon/pen/MweYma JSFiddle使用CSS：https://jsfiddle.net/c80p3pyx/1/

如果你需要确保你的段落没有换行，只需添加

p { white-space: nowrap; }

到你的CSS。这样，您的段落将始终保持一行，但不符合屏幕宽度的行将导致浏览器显示（或至少提供）水平滚动条，几乎在所有情况下您都希望避免。 “太长”段落上唯一的另一个选择是缩短文本，或者使用较小的字体。

引导程序中的空白选项卡

1 个答案: