Question

我正在尝试使用浮动和清除属性制作带有社交媒体图标的底部边栏。所有图标都向左浮动，除了明亮的推特图标。 Why is the icon for twitter larger than the other icons? However, it is the same size when it's floated left.

我希望它与其他图标大小相同，并保持在最右角的位置。或者至少在图标之间没有大量空间的情况下集中......我该如何解决这个问题？我做错了什么？

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
    font-size: 1em;
}

body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
}


/*logo*/

#logo {
    float: left;
    width: 5.5em;
    background-color: white;
    position: relative;
    top: -2em;
}


/*pagewrapper*/

.pageWrapper {
    width: 1000px;
    margin: 0 auto;
    padding: 2em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-style: double;
    border-width: thick;
    border-color: #7BDFF2;
    overflow: auto;
}


/*menu*/

#nav_menu ul {
    list-style-type: none;
}

#nav_menu ul li {
    float: left;
    margin-left: 6em;
    margin-right: 4em;
}

#nav_menu li a {
    text-align: center;
    display: block;
    width: 9em;
    padding: .9em 0;
    text-decoration: none;
    background-color: #7BDFF2;
    color: #eff7f6;
    font-weight: bold;
    border-radius: 1em;
}

#nav_menu li a:hover {
    color: #f7d6e0;
}

#nav_menu li a:active {
    color: #b2f7ef;
}

a {
    text-transform: uppercase;
    font-weight: bold;
    color: #f2b5d4;
}

a:active {
    color: #ffcdee;
}

a:hover {
    color: #eff7f6;
}


/*copyright*/

footer {
    text-align: center;
    font-weight: 100;
    font-size: .7em;
}


/* aside */

#socialmedia {
    width: 80%;
    margin: 0 auto;
    margin-top: 2em;
}

#socialmedia h3 {
    text-transform: lowercase;
    color: #fff;
    margin: 0 auto;
    background-color: #f2b5d4;
    letter-spacing: .9em;
    font-size: .8em;
    width: 100%;
    height: 100%;
    border-style: dotted;
    border-color: #eff7f6;
    text-align: center;
    border-width: thin;
}

#socialmedia img {
    width: 10%;
    height: auto;
}


/*youtube embed video*/

.video iframe,
.video object,
.video embed {
    display: block;
    margin: 0 auto;
    top: 0;
    left: 0;
    padding-top: 1em;
    clear: both;
}

h1 {
    font-weight: bold;
    text-align: center;
    font-size: 2em;
    position: relative;
    right: .5em;
    bottom: -2em;
}

h2 {
    font-weight: 200;
    text-align: left;
}

.member {
    margin-top: 3em;
}

.p album {
    margin-top: .3em;
}


/*albums*/

.album {
    border: dotted #000 .2em;
    border-radius: .5em;
    width: 20em;
    min-height: 20em;
    font-size: 1em;
    margin-top: 5em;
    margin: 1em;
    padding: 1em;
}

#album img {
    height: auto;
    max-width: 100%;
}


/*floats and clears*/

.left {
    float: left;
}

.right {
    float: right;
}

.clearleft {
    clear: left;
}

.clearright {
    clear: right;
}

.clearboth {
    clear: both;
}

＆＃13;

<aside id="socialmedia">
  <h3>social media</h3>
  <div class="ig left">
    <a href="https://www.instagram.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo"></a>
  </div>
  <div class="fb left">
    <a href="https://www.facebook.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo"></a>
  </div>
  <div class="yt left">
    <a href="https://www.youtube.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo"></a>
  </div>
  <div class="twt clearright">
    <a href="https://www.twitter.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo"></a>
  </div>
</aside>

＆＃13;

Answer 1

你可以使它们10％宽，前三者之间的差距为20％。 10％x 4 = 40％。 20％* 3 = 60％。 40％+ 60％= 100％

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
    font-size: 1em;
}

body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
}


/*logo*/

#logo {
    float: left;
    width: 5.5em;
    background-color: white;
    position: relative;
    top: -2em;
}


/*pagewrapper*/

.pageWrapper {
    width: 1000px;
    margin: 0 auto;
    padding: 2em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-style: double;
    border-width: thick;
    border-color: #7BDFF2;
    overflow: auto;
}


/*menu*/

#nav_menu ul {
    list-style-type: none;
}

#nav_menu ul li {
    float: left;
    margin-left: 6em;
    margin-right: 4em;
}

#nav_menu li a {
    text-align: center;
    display: block;
    width: 9em;
    padding: .9em 0;
    text-decoration: none;
    background-color: #7BDFF2;
    color: #eff7f6;
    font-weight: bold;
    border-radius: 1em;
}

#nav_menu li a:hover {
    color: #f7d6e0;
}

#nav_menu li a:active {
    color: #b2f7ef;
}

a {
    text-transform: uppercase;
    font-weight: bold;
    color: #f2b5d4;
}

a:active {
    color: #ffcdee;
}

a:hover {
    color: #eff7f6;
}


/*copyright*/

footer {
    text-align: center;
    font-weight: 100;
    font-size: .7em;
}


/* aside */

#socialmedia {
    width: 80%;
    margin: 0 auto;
    margin-top: 2em;
}

#socialmedia h3 {
    text-transform: lowercase;
    color: #fff;
    margin: 0 auto;
    background-color: #f2b5d4;
    letter-spacing: .9em;
    font-size: .8em;
    width: 100%;
    height: 100%;
    border-style: dotted;
    border-color: #eff7f6;
    text-align: center;
    border-width: thin;
}

#socialmedia img {
  max-width: 100%;
    height: auto;
}


/*youtube embed video*/

.video iframe,
.video object,
.video embed {
    display: block;
    margin: 0 auto;
    top: 0;
    left: 0;
    padding-top: 1em;
    clear: both;
}

h1 {
    font-weight: bold;
    text-align: center;
    font-size: 2em;
    position: relative;
    right: .5em;
    bottom: -2em;
}

h2 {
    font-weight: 200;
    text-align: left;
}

.member {
    margin-top: 3em;
}

.p album {
    margin-top: .3em;
}


/*albums*/

.album {
    border: dotted #000 .2em;
    border-radius: .5em;
    width: 20em;
    min-height: 20em;
    font-size: 1em;
    margin-top: 5em;
    margin: 1em;
    padding: 1em;
}

#album img {
    height: auto;
    max-width: 100%;
}


/*floats and clears*/

.left {
    float: left;
}

.right {
    float: right;
}

.clearleft {
    clear: left;
}

.clearright {
    clear: right;
}

.clearboth {
    clear: both;
}

.icons:last-child {
justify-content: center;
}

#socialmedia > div {
float: left;
width: 10%;
}

#socialmedia > div:not(:last-child) {
margin-right: 20%;
}

＆＃13;

<aside id="socialmedia">
  <h3>social media</h3>
  <div class="ig">
    <a href="https://www.instagram.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo"></a>
  </div>
  <div class="fb">
    <a href="https://www.facebook.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo"></a>
  </div>
  <div class="yt">
    <a href="https://www.youtube.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo"></a>
  </div>
  <div class="twt">
    <a href="https://www.twitter.com"><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo"></a>
  </div>
  
</aside>

＆＃13;

添加浮动/清除属性后图像变大了吗？

1 个答案: