1
いいえ、私はこのポートフォリオのページを持っています。何らかの理由で列が左に張り付いていて、自動余白が機能しない、浮動小数点：none doesn仕事はありません。私はかなり何でも試しました。誰でもこれを修正する方法を知っていますか？問題の2項目の行が中央になく、意図したとおりに動作しない
問題のサイトは：あなたがはっきり左揃えされているプレースホルダの写真やソーシャルメディアボタンのすべてを見ることができるように https://jsfiddle.net/p3jgjnbr/
.Logo {
font-size: 20px;
color: white;
font-family: Monospace;
-webkit-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.Intro-Nav {
margin-bottom: 50px;
}
#Logo:hover {
font-size: 20px;
color: green;
font-family: Monospace;
background-color: white;
border-color: white;
border-bottom: solid green;
}
#Navlist li {
-moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
font-family: Monospace;
font-size: 20px;
}
#Navlist li:hover {
background-color: green;
font-family: Monospace;
border-bottom: solid white;
}
.slight-round {
border-radius: 10px;
}
.Anon {
width: 400px;
border-radius: 200px;
}
#ImgWrap {
padding-top: 50px;
}
.About {
padding-left: 20px;
padding-bottom: 30px;
background-color: white;
margin-top: 60px;
border-left: thick solid #ff0000;
font-family: Monospace;
font-size: ?px;
}
#Portfolio {
padding-top: 50px;
}
.Projects {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row1 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row2 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row3 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row1 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row2 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row3 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#Me {
padding-bottom: 20px;
padding-top: 50px;
}
.Background1 {
background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
background-size: cover;
height: 700px;
text-align: center;
padding-bottom: 50px;
}
.Background2 {
background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
height: ?px;
text-align: center;
padding-bottom: 50px;
}
.SocialMedia {
background-color: lightgrey;
}
.SocialButtons {
padding: 30px 30px;
padding-bottom: 100px;
}
.Head1 {
display: table;
margin: 0 auto;
}
.Head1 p {
font-family: Monospace;
font-size: 25px;
padding: 0px 0px;
margin: 0px 0px;
}
.btn-circle.btn-xl {
background-position: center;
position: relative;
width: 100px;
height: 100px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 65px;
-moz-transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
width: 155px;
height: 100px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
visibility: visible;
opacity: 1;
}
.btnDes {
position: absolute;
padding-top: 45px;
font-size: 20px;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
visibility: visible;
opacity: 1;
}
.SocialMed {
border-bottom: solid black;
}
.CntMeBtn {
font-size: 1.7em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="Background1 container-fluid">
<div class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top Intro-Nav">
<div class="container">
<a href="#" class="navbar-brand Logo" id="Logo">
StruckCroissant
</a>
<button class="navbar-toggle slight-round" type="button" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right" id="Navlist">
<li><a href="#Me">About Me</a>
</li>
<li><a href="#Portfolio">Portfolio</a>
</li>
<li><a href="#Contact">Contact Me</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid" id="Me">
<div class="row" id="AbtRow1">
<div class="col-md-12 col-sm-12" id="ImgWrap">
<img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon">
<p class="anon"></p>
</div>
</div>
<div class="row" id="AbtRow2">
<div class="col-md-12 col-sm-12">
<p class="About">
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah</p>
</div>
</div>
</div>
</div>
</div>
<div class="Background2" id="Portfolio">
<div class="container-fluid">
<div class="row row-centered" id="row1">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Go ahead and guess what this picture is...Thats right! A filler!</p>
</div>
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
</div>
</div>
<div class="row row-centered" id="row2">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Go ahead and guess what this picture is...Thats right! A filler!</p>
</div>
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
</div>
</div>
<div class="row row-centered" id="row3">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>If you make it to the end of these fillers i might just give you a treat!</p>
</div>
<div class="col-md-6 col-centered">
<div class="Portfolio-content">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>I looked in the cupboards but alas, the treats were nowhere to be found</p>
</div>
</div>
</div>
</div>
</div>
<div class="SocialMedia" id="Contact">
<div class="row">
<div class="col-md-12 SocialMed">
<div class="Head1">
<p>Contact Me</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-centered SocialButtons">
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw Fb CntMeBtn"></i><p class="btnDes">Facebook</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"><i class="fa fa-fire fa-fw Fb CntMeBtn"></i><p class="btnDes">FreeCodeCamp</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw Fb CntMeBtn"></i><p class="btnDes">LinkedIn</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw Fb CntMeBtn"></i><p class="btnDes">Github</p></a>
</div>
</div>
</div>
</div>
</body>、私は助けのすべてのビットを感謝しています。ありがとうございました！