为了账号安全,请及时绑定邮箱和手机立即绑定

图片为什么会居中不能贴住右边呢?

.index-header {

}
.index-header .index-header-nav {
  background: #ccc;
   height: 50px;
}
.index-header .index-header-nav ul{
   list-style: none;
   margin: 0;
}
.index-header .index-header-nav ul li {
   display: inline-block;
   line-height: 50px;
   margin-right: 20px;
   float: right;
}
.index-header .index-header-nav ul li a{
   line-height: 50px;
   text-decoration: none;
   display: inline-block;
   height: inherit;
   color: #fff;
}
.index-header .index-header-nav ul li.index-header-nav-logo{
   float: left;
}
.index-header .index-header-banner {
   background: #777;
   height: 700px;
}
.index-header .index-header-banner .index-header-banner-inner{
   max-width: 300px;
   text-align: center;
   margin: 0 auto;
   position: relative;
   top: 160px;
}
.index-header .index-header-banner .index-header-banner-inner h1{
   margin: 0;
}
.index-header .index-header-banner .index-header-banner-inner .sub-heading{
   line-height: 30px;
   margin: 30px;
}
.index-header .index-header-banner .index-header-banner-inner .more{
   margin-top: 280px;
}
button {
   border: none;
   background: #333;
   color:#eee;
   padding: 14px 40px;
}
/*.index-header-nav-logo{
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 1px;
   float: left;
}

.index-header-nav-logo a{
   color: #fff;
}*/
.green-section{
   text-align: center;
   background: #089DB0;
   color: #fff;
   padding: 100px 0;
}
.green-section .hr{
   background: #078494;
   width: 60%;

57a744620001d9ed05000450.jpg

57a744630001f78405000245.jpg


}
.green-section .icon-group .icon{
   display: inline-block;
   width: 80px;
   height: 80px;
   border: 1px solid #0D6F7C;
   transform: rotate(45deg);
   margin: 20px;
}
.icon-group {
   margin-top: 60px;
}
.wrapper {
   max-width: 1080px;
   margin: 0 auto;
}
.hr{
   width: 100%;
   height:2px;
   margin: 0 auto;
   margin:20px auto;
}
.sub-heading {
   font-size: 18px;
}

.gray-section{
   background: #252f34;
   color: #fff;
}
.gray-section .img-section {
   width: 45%;
}
.img-section img{
   width: 100%;
}
.gray-section .text-section {
   witdh:55%
}
.article-preview > div{
   float: left;
   font-size: 0;
}
.article-preview:nth-child(odd){
   background-color: rgba(255,255,255,0.05);
}
.article-preview:after{
   content:'';
   display: block;
   clear: both;
}
.text-section{
   position: relative;
   top: 68px;
   left: 50px;
}
.text-section h2{
   margin-top: 20px;
}
.text-section .sub-heading{
   font-size: 22px;
}
.text-section p  {
   font-size: 18px;
   letter-spacing: 1px;
}
.text-section >*{
   max-width: 50%;
}



正在回答

1 回答

因为你文字那里是设置relative,会占位置,所以图片被文字顶到中间了,将relative改成absolute

.text-section{
   position: relative;   <!--这里改成absolute-->
   top: 68px;
   left: 50px;
}


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5和CSS3扁平化风格博客
  • 参与学习       86811    人
  • 解答问题       383    个

HTML5与CSS3搭建超酷扁平化风格博客

进入课程

图片为什么会居中不能贴住右边呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信