2 div不按我想要的方式合并

时间：2016-07-19 08:19:26

标签： html css twitter-bootstrap twitter-bootstrap-3

＆＃13;
＆＃13; 
/* CSS Document */

.my-bg{
	background-color:#DD792E;
}

.bottom-0{
	bottom: 0px;
}

.border-right-curved{
	/*border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;*/
	height:50px;
	text-align:center;
}

.main-heading{
	color:white;
	font-size:24px;
	font-weight:bold;
}

.width-95{
	width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>معرفة</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>

<body background="images/background.png">
<div id="container>"

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我有2个div。第一个是col-sm-11，第二个是col-sm-1。第一个div有文本，第二个div有图像。我想加入2个div的内容。

我目前的输出是这样的。

enter image description here

我希望我的输出像这样。

enter image description here

这是我的代码。

HTML 

<body background="images/background.png">
<div id="container>"

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>

我的 CSS 

.my-bg{
    background-color:#DD792E;
}

.bottom-0{
    bottom: 0px;
}

.border-right-curved{
    /*border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;*/
    height:50px;
    text-align:center;
}

.main-heading{
    color:white;
    font-size:24px;
    font-weight:bold;
}

.width-95{
    width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

另外，我希望我的FOOTER固定在底部。我正在使用bootstrap。任何帮助都感激不尽。感谢您！

7 个答案:

答案 0 :(得分：2)

在bootstrap中，每个 col 和容器上都有默认 15px 左右填充，因此make一定要在CSS或内联样式中将填充重置为0. 

<div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11" style="padding:0;">

答案 1 :(得分：1)

您可以在代码中将<div id="container>"更改为<div id="container">吗？这应该是问题。

＆＃13;
＆＃13; 
/* CSS Document */

.my-bg{
	background-color:#DD792E;
}

.bottom-0{
	bottom: 0px;
}

.border-right-curved{
	/*border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;*/
	height:50px;
	text-align:center;
}

.main-heading{
	color:white;
	font-size:24px;
	font-weight:bold;
}

.width-95{
	width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>معرفة</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>

<body background="images/background.png">
<div id="container">
<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

向.border-right-curved

添加margin-left 
.border-right-curved{
 margin-left: -20px;
}

调整margin-left值以符合您的偏好

答案 3 :(得分：1)

这个图像由于自举系统而占用填充。因此，只需将padding:0px添加到新类no-padding即可。如果你不想要填充，只需将这个类添加到该特定类中。

＆＃13;
＆＃13; 
/* CSS Document */

.my-bg{
	background-color:#DD792E;
}

.bottom-0{
	bottom: 0px;
}

.border-right-curved{
	/*border-bottom-right-radius: 50px;
	border-top-right-radius: 50px;*/
	height:50px;
	text-align:center;
}

.main-heading{
	color:white;
	font-size:24px;
	font-weight:bold;
}

.width-95{
	width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.no-padding{
    padding:0px;
}
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>معرفة</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>

<body background="images/background.png">
<div id="container>"

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1 no-padding"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

由于引导程序中的所有 * - col - * 类具有padding-right和padding-left 15px，因此存在差距

你有3个选择

1.删除css中的填充符padding-right:0;padding-left:0

2.在包装器div中输入您的两个div（cols）并将background-color:#DD792E;设置为新的包装div（推荐）

3.添加负边距 - 左侧第一个合并margin-left:-15px

答案 5 :(得分：1)

尝试

padding-left:0px;

HTML 

<div class=" col-xs-1 col-sm-1 col-md-1 nopad" > <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>

CSS 

.nopad{padding-left:0px}

答案 6 :(得分：0)

试试这个

<div class=" col-xs-1 col-sm-1 col-md-1 nopadding" > <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>

.nopadding{padding-left:0px}

或

<div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11 ">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
.my-bg{background-colog:your-color-code;}
相关问题
最新问题