引导网格文本书写

我正在使用bootstrap。我已经创建了一个网格。在左边的网格里面有一个圆。现在，我想在圆圈之外写一些文字。但是，当我写东西的时候，它会和圆重叠。文字不应与圆圈重叠，反之亦然。特别是，它应该是响应的。那个文本部分应该有适当的边距。在移动设备中，假设内容很大，那么文本不应该放到圆圈的后面。它应该垂直增加网格的高度，以填充其中的所有内容。

这就是发生的问题，http://s24.postimg.org/8fp4y8c8l/Screen_Shot_2015_08_24_at_7_28_35_am.png

我期待这样的东西，http://s3.postimg.org/951vbnupf/Screen_Shot_2015_08_24_at_7_31_00_am.png

我的代码:-

.demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 140px;
        background: #abb1b8;
        margin-bottom: 20px;
        
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}
#circle {
    background: #FFC40C; 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position:absolute;
    left:5%;
    top:13%;
    }
    .circle-posiiton {
        position:relative;
    }

<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div main="rowmain">
	<div class="row">
    	<div class="col-md-12 circle-position">
        	<div class="demo-content"><h1>Hi, Stack overflow. It is good.</h1>
     			<div id="circle"></div>
        	</div>
    	</div>
	</div>
</div>
</body>

这是CSS3 calc函数可以解决的工作。根据圆圈的位置和宽度计算内容div的内边距，将文本置于写入位置。这是我添加到你的.demo-content类的CSS:

padding-left: -webkit-calc(5% + 105px);
padding-left: -moz-calc(5% + 105px);
padding-left: calc(5% + 105px);

为了获得最大的兼容性，我也使用了供应商前缀的版本。圆圈的位置设置为5%，宽度设置为105px，边距设置为5px。

.demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 140px;
        background: #abb1b8;
        margin-bottom: 20px;
        padding-left: -webkit-calc(5% + 105px);
        padding-left: -moz-calc(5% + 105px);
        padding-left: calc(5% + 105px);
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}
#circle {
    background: #FFC40C; 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position:absolute;
    left:5%;
    top:13%;
    }
    .circle-posiiton {
        position:relative;
    }

<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div main="rowmain">
	<div class="row">
    	<div class="col-md-12 circle-position">
        	<div class="demo-content"><h1>Hi, Stack overflow. It is good.</h1>
     			<div id="circle"></div>
        	</div>
    	</div>
	</div>
</div>
</body>

在你的css中加入.demo-content h1 { margin-left: 10%; }应该会有帮助。

相关内容

最新更新

热门标签：