1. 首页
  2. 问答
  3. 响应HTML + CSS自定义断行 - 图片

响应HTML + CSS自定义断行 - 图片

2013-01-05 24 views
0

我一直在尝试为此写一段代码一段时间，但没有成功。响应HTML + CSS自定义断行 - 图片

我想要什么来完成：

large screens

这部分是不是很难做静态的，但响应的概念让我坚果。

应该如何看小屏幕上：

Small screens display

如何现在看起来：

enter image description here

就像你看到的，当我开始调整我的窗口，这一切开始好，但是，然后，在一个点上，右边的线条就会变成一条新线。

小提琴：

我的小提琴制作一个这样的例子：http://jsfiddle.net/Gbcfs/8/

CODE：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 2px; float:left; min-width:2px;} 
h2 {float:left;} 
</style> 
</head> 

<body> 
<div class="line"></div> 
<h2>How it works</h2> 
<div class="line"></div> 
</body> 
</html>

来源

2013-01-05 Majstor

回答

4

我会带边框做到这一点。

试试这个：

<h2><span>Heading 2</span></h2> 


body { 
    background-color:#fff; 
} 
h2 { 
    border-bottom:solid 1 px black; 
    text-align:center; 
} 
h2 span { 
    background-color:#fff; 
    padding-bottom:3px; 
    margin-bottom:-3px; 
    display:inline-block; 
}

http://jsbin.com/aguxoz/1/edit

来源

2013-01-05 17:59:56 user1721135

+0

让我看一下.. 。 – Majstor

+0

就是这样！非常感谢... – Majstor

0

我假设你的问题对字体大小扶养过， 尝试用下面的CSS

<style> 
.line{width:30%; background: #a6a6a6 0 50% repeat-x; display:inline; margin:2px 2px 2px; float:left; } 
h2 {float:left;} 
.autowidth 
{ 
    width:auto; 
} 
</style>
与follwoing mark-一起

up

<div class="autowidth"> 
<div class="line"></div> 
<h2>How it works</h2> 
<div class="line"></div> 
<div>

这可以在一定程度上有所帮助。

来源

2013-01-05 18:08:52 NBaua

+0

背景重复是图像 – user1721135

+0

嘿NBaua！ Tnx的贡献..我发现以前的答案更有组织，所以我将它标记为答案..再次.. Tnx .. – Majstor

0

您可以使用此代码...........我认为这是非常有帮助的..

<div><div class="line"></div> 
<h2 style="padding-top:8px">How it works</h2> 
<div class="line"></div></div> 


.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 0 2px; float:left; min-width:2px;} 
h2 {float:left;}

来源

2013-07-24 13:57:08

相关问题

 相关问题