1. 首頁
  2. 問答
  3. 奇怪的浮動行爲

奇怪的浮動行爲

2014-09-23 156 views
3

我在我的網站上有一個浮動問題。奇怪的浮動行爲

我有6個Div容器，每行3個，全部左移。 因此，它應該是這樣的：

0-0-0

0-0-0

而是它像：

0-0-0

--- -0

0-0

這裏是一個鏈接的問題：

Website

#container { 
 
    \t float: left; 
 
    \t margin: 0 -240px 0 0; 
 
    \t width: 100%; 
 
    } 
 

 
    #primary, 
 
    #secondary { 
 
    \t float: right; 
 
    \t overflow: hidden; 
 
    \t width: 220px; 
 
    } 
 
    #secondary { 
 
    \t clear: right; 
 
    } 
 
    #footer { 
 
    \t clear: both; 
 
    \t width: 100%; 
 
    } 
 

 

 

 
    /* =Structure 
 
    -------------------------------------------------------------- */ 
 

 
    /* The main theme structure */ 
 
    #access .menu-header, 
 
    div.menu, 
 
    #colophon, 
 
    #branding, 
 
    #main, 
 
    #wrapper { 
 
    \t margin: 0 auto; 
 
    \t width: 1000px; 
 
    } 
 
    #wrapper { 
 
    \t margin-top: 20px; 
 
    \t padding: 0 20px 20px 20px; 
 
    } 
 

 
    /* Structure the footer area */ 
 
    #footer-widget-area { 
 
    \t overflow: hidden; 
 
    } 
 
    #footer-widget-area .widget-area { 
 
    \t float: left; 
 
    \t margin-right: 20px; 
 
    \t width: 220px; 
 
    } 
 
    #footer-widget-area #fourth { 
 
    \t margin-right: 0; 
 
    } 
 
    #site-info { 
 
    \t float: left; 
 
    \t font-size: 14px; 
 
    \t font-weight: bold; 
 
    \t width: 700px; 
 
    } 
 
    #site-generator { 
 
    \t float: right; 
 
    \t width: 220px; 
 
    } 
 

 

 

 
    /* Infobox */ 
 

 

 
    .infotext { 
 
    \t width:600px; 
 
    \t margin: 80px 0 0 500px; 
 
    \t 
 
    \t box-sizing: border-box; 
 
    } 
 

 

 
    /* Overview */ 
 

 
    .child-thumb { 
 
    \t width: 282px; 
 
    \t float:left; 
 
    \t margin: 15px; 
 
     \t background: #CCC; 
 
    } 
 

 
    .child-thumb p a { 
 
    \t display: none; 
 
    } 
 

 
    .wp-post-image { 
 
    \t margin-bottom: 20px; 
 
    } 
 

 
    .bilderrahmen-wrapper { 
 
    \t z-index: 1; 
 
    \t height: 220px; 
 
    \t width: 290px; 
 
    \t overflow: hidden; 
 
    \t -webkit-animation: childthumb 5s ease-in-out infinite; 
 
    \t animation: childthumb 5s ease-in-out infinite; 
 
    \t transform-origin: 50% -30%; 
 
    \t transform: translateZ(0); 
 
    \t 
 
    } 
 

 
    .bilderrahmen { 
 
    \t z-index: 1; 
 
    \t height: 175px; 
 
    \t width: 290px; 
 
    \t background: url(image/overview.png); 
 
    \t overflow: hidden; 
 
    \t background-repeat: no-repeat; 
 
    } 
 

 
    .plakette_wrapper { 
 
    \t text-align: center; 
 
    } 
 

 
    .plakette { 
 
    \t display: inline-block; 
 
    \t vertical-align: middle; 
 
    \t height: 53px; 
 
    \t margin: -20px 0 0 0; 
 
    } 
 

 
    .plakette span { 
 
    \t background: url(image/plakette/middle.png); 
 
    \t height: 53px; 
 
    \t float: left !important; 
 
    \t line-height: 49px; 
 
    \t color: #272727; 
 
    \t margin-left: -1px; 
 
    } 
 

 
    .plakette .left { 
 
    \t float: left; 
 
    \t background: url(image/plakette/left.png); 
 
    \t height: 53px; 
 
    \t width: 31px; 
 
    } 
 
    .plakette .right { 
 
    \t float: left; 
 
    \t background: url(image/plakette/right.png); 
 
    \t height: 53px; 
 
    \t width: 34px; 
 
    \t margin-left: -1px; 
 
    } 
 

 

 

 

 

 

 

 
    .bilderrahmen-wrapper .thumb { 
 
    \t z-index: -1; 
 
    \t height: 135px; 
 
    \t width: 265px; 
 
    \t overflow: hidden; 
 
    \t position: absolute; 
 
    \t margin: -166px 0 0 9px; 
 
    } 
 

 
    .thumb-image { 
 
    \t margin-bottom: 20px; 
 
    } 
 

 
    .child-thumb a { 
 
    \t text-decoration: none !important; 
 
    } 
 

 

 

 
    .child-thumb p { 
 
    \t margin: 0px 0 0 0; 
 
    } 
 

 

 
    /* This is the custom header image */ 
 
    #branding img { 
 
    \t border-top: 4px solid #000; 
 
    \t border-bottom: 1px solid #000; 
 
    \t display: block; 
 
    \t float: left; 
 
    } 
 

 
    .logo { 
 
    \t height:154px; 
 
    \t width:146px; 
 
    \t background:url(images/logo.png); 
 
    \t display:block; 
 
    \t float:left; 
 
    \t margin: 10px 0 0 10px; 
 
    \t position: absolute; 
 
    \t z-index: 2; 
 
    } 
 

 

 
    /* =Menu 
 
    -------------------------------------------------------------- */ 
 

 
    #access { 
 
    \t display: block; 
 
    \t float: right; 
 
    \t margin: 85px 20px 0 0; 
 
    \t width: 775px; 
 
    \t 
 
    } 
 
    #access .menu-header, 
 
    div.menu { 
 
    \t font-size: 18px; 
 
    \t margin-left: 12px; 
 
    \t width: 928px; 
 
    } 
 
    #access .menu-header ul, 
 
    div.menu ul { 
 
    \t list-style: none; 
 
    \t margin: 0; 
 
    } 
 
    #access .menu-header li, 
 
    div.menu li { 
 
    \t float: left; 
 
    \t padding: 0 10px 0 10px; 
 
    \t position: relative; 
 
    } 
 
    #access a { 
 
    \t color: #191919; 
 
    \t display: block; 
 
    \t line-height: 38px; 
 
    \t padding: 0 10px; 
 
    \t text-decoration: none; 
 
    \t text-transform:uppercase; 
 
    \t font-weight:100; 
 
    \t font-family: 'Delius Unicase', cursive !important; 
 
    } 
 
    #access ul ul { 
 
    \t position:absolute; 
 
     top:-99999px; 
 
     left:0; 
 
     opacity: 0; /* Hide sub level */ 
 
     -webkit-transition: opacity .5s ease-in-out; 
 
     -moz-transition: opacity .5s ease-in-out; 
 
     -o-transition: opacity .5s ease-in-out; 
 
     z-index:497; 
 
    } 
 
    #access ul ul li { 
 
    \t min-width: 180px; 
 
    } 
 
    #access ul ul ul { 
 
    \t left: 100%; 
 
    \t top: 0; 
 
    } 
 
    #access ul ul a { 
 
    \t background: rgba(255, 255, 255, 0.8); 
 
    \t line-height: 1em; 
 
    \t padding: 10px; 
 
    \t width: 220px; 
 
    \t height: auto; 
 
    \t 
 
    } 
 
    #access li:hover > a, 
 
    #access ul ul :hover > a { 
 
    \t color: #ea4f23 !important; 
 
    \t -webkit-transition: all 0.1s ease-in-out !important; 
 
     -o-transition: all 0.1s ease-in-out !important; 
 
     -moz-transition: all 0.1s ease-in-out !important; 
 
     -ms-transition: all 0.1s ease-in-out !important; 
 
     transition: all 0.1s ease-in-out !important; 
 
    } 
 

 
    #access a { 
 
    \t -webkit-transition: all 0.2s ease-in-out !important; 
 
     -o-transition: all 0.2s ease-in-out !important; 
 
     -moz-transition: all 0.2s ease-in-out !important; 
 
     -ms-transition: all 0.2s ease-in-out !important; 
 
     -kthtml-transition: all 0.2s ease-in-out !important; 
 
     transition: all 0.2s ease-in-out !important; 
 
    \t } 
 
    \t 
 
    #access ul li:hover > ul { 
 
    \t opacity: 1; position:absolute; top:99%; left:0; z-index: 1000; 
 
    \t 
 
    } 
 
    #access ul li.current_page_item > a, 
 
    #access ul li.current_page_ancestor > a, 
 
    #access ul li.current-menu-ancestor > a, 
 
    #access ul li.current-menu-item > a, 
 
    #access ul li.current-menu-parent > a { 
 
    \t color: #454545; 
 
    } 
 
    * html #access ul li.current_page_item a, 
 
    * html #access ul li.current_page_ancestor a, 
 
    * html #access ul li.current-menu-ancestor a, 
 
    * html #access ul li.current-menu-item a, 
 
    * html #access ul li.current-menu-parent a, 
 
    * html #access ul li a:hover { 
 
    \t color: #454545; 
 
    } 
 

 

 
    /* =Content 
 
    -------------------------------------------------------------- */ 
 

 
    #home-container { 
 
    \t height:200px; 
 
    \t width: 1200px; 
 
    \t margin:680px 0 0 0; 
 
    } 
 

 
    #main { 
 
    \t clear: both; 
 
    \t overflow: hidden; 
 
    \t padding: 32px 30px 30px 30px; 
 
    \t background:rgba(255, 255, 255, 0.95);; 
 
    \t position: relative; 
 
    \t min-height: 700px; 
 
    \t background: url(images/bg-content.png) 
 
    } 
 

 
    .main-top { 
 
    \t background: url(images/bg-content-top.png); 
 
    \t height: 13px; 
 
    \t width: 1000px; 
 
    \t margin: -45px 0 0 0; 
 
    } 
 

 
    .main-bottom { 
 
    \t background: url(images/bg-content-bottom.png); 
 
    \t height: 13px; 
 
    \t width: 1000px; 
 
    \t margin-top: -10px; 
 
    } 
 

 
    #content { 
 
    \t margin: 0px 0 36px 0; 
 
    } 
 

 
    .entry-content { 
 
    \t -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
     -moz-column-count: 3; /* Firefox */ 
 
     column-count: 3; 
 
     margin-bottom: 20px; 
 
     widows:5; 
 
    } 
 

 

 

 
    #content, 
 
    #content input, 
 
    #content textarea { 
 
    \t color: #333; 
 
    \t font-size: 15px; 
 
    \t line-height: 24px; 
 
    } 
 
    #content p, 
 
    #content ul, 
 
    #content ol, 
 
    #content dd, 
 
    #content pre, 
 
    #content hr { 
 
    \t margin-bottom: 24px; 
 
    } 
 
    #content ul ul, 
 
    #content ol ol, 
 
    #content ul ol, 
 
    #content ol ul { 
 
    \t margin-bottom: 0; 
 
    } 
 
    #content pre, 
 
    #content kbd, 
 
    #content tt, 
 
    #content var { 
 
    \t font-size: 15px; 
 
    \t line-height: 21px; 
 
    } 
 
    #content code { 
 
    \t font-size: 13px; 
 
    } 
 
    #content dt, 
 
    #content th { 
 
    \t color: #000; 
 
    } 
 
    #content h1, 
 
    #content h2, 
 
    #content h3, 
 
    #content h4, 
 
    #content h5, 
 
    #content h6 { 
 
    \t color: #000; 
 
    \t line-height: 1.5em; 
 
    \t margin: 0 0 20px 0; 
 
    } 
 
    #content table { 
 
    \t border: 1px solid #e7e7e7; 
 
    \t margin: 0 -1px 24px 0; 
 
    \t text-align: left; 
 
    \t width: 100%; 
 
    } 
 
    #content tr th, 
 
    #content thead th { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    \t font-weight: bold; 
 
    \t line-height: 18px; 
 
    \t padding: 9px 24px; 
 
    } 
 
    #content tr td { 
 
    \t border-top: 1px solid #e7e7e7; 
 
    \t padding: 6px 24px; 
 
    } 
 
    #content tr.odd td { 
 
    \t background: #f2f7fc; 
 
    } 
 
    .hentry { 
 
    \t margin: 0 0 48px 0; 
 
    } 
 
    .home .sticky { 
 
    \t background: #f2f7fc; 
 
    \t border-top: 4px solid #000; 
 
    \t margin-left: -20px; 
 
    \t margin-right: -20px; 
 
    \t padding: 18px 20px; 
 
    } 
 
    .single .hentry { 
 
    \t margin: 0 0 36px 0; 
 
    } 
 
    .page-title { 
 
    \t color: #000; 
 
    \t font-size: 14px; 
 
    \t font-weight: bold; 
 
    \t margin: 0 0 36px 0; 
 
    } 
 
    .page-title span { 
 
    \t color: #333; 
 
    \t font-size: 16px; 
 
    \t font-style: italic; 
 
    \t font-weight: normal; 
 
    } 
 
    .page-title a:link, 
 
    .page-title a:visited { 
 
    \t color: #777; 
 
    \t text-decoration: none; 
 
    } 
 
    .page-title a:active, 
 
    .page-title a:hover { 
 
    \t color: #ff4b33; 
 
    } 
 
    #content .entry-title { 
 
    \t color: #000; 
 
    \t font-size: 21px; 
 
    \t font-weight: bold; 
 
    \t line-height: 1.3em; 
 
    \t margin-bottom: 20px; 
 
    } 
 
    .entry-title a:link, 
 
    .entry-title a:visited { 
 
    \t color: #000; 
 
    \t text-decoration: none; 
 
    } 
 
    .entry-title a:active, 
 
    .entry-title a:hover { 
 
    \t color: #ff4b33; 
 
    } 
 
    .entry-meta { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    } 
 
    .entry-meta abbr, 
 
    .entry-utility abbr { 
 
    \t border: none; 
 
    } 
 
    .entry-meta abbr:hover, 
 
    .entry-utility abbr:hover { 
 
    \t border-bottom: 1px dotted #666; 
 
    } 
 
    .entry-content, 
 
    .entry-summary { 
 
    \t clear: both; 
 
    } 
 
    #content .entry-summary p:last-child { 
 
    \t margin-bottom: 12px; 
 
    } 
 
    .entry-content fieldset { 
 
    \t border: 1px solid #e7e7e7; 
 
    \t margin: 0 0 24px 0; 
 
    \t padding: 24px; 
 
    } 
 
    .entry-content fieldset legend { 
 
    \t background: #fff; 
 
    \t color: #000; 
 
    \t font-weight: bold; 
 
    \t padding: 0 24px; 
 
    } 
 
    .entry-content input { 
 
    \t margin: 0 0 24px 0; 
 
    } 
 
    .entry-content input.file, 
 
    .entry-content input.button { 
 
    \t margin-right: 24px; 
 
    } 
 
    .entry-content label { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    } 
 
    .entry-content select { 
 
    \t margin: 0 0 24px 0; 
 
    } 
 
    .entry-content sup, 
 
    .entry-content sub { 
 
    \t font-size: 10px; 
 
    } 
 
    .entry-content blockquote.left { 
 
    \t float: left; 
 
    \t margin-left: 0; 
 
    \t margin-right: 24px; 
 
    \t text-align: right; 
 
    \t width: 33%; 
 
    } 
 
    .entry-content blockquote.right { 
 
    \t float: right; 
 
    \t margin-left: 24px; 
 
    \t margin-right: 0; 
 
    \t text-align: left; 
 
    \t width: 33%; 
 
    } 
 
    .page-link { 
 
    \t clear: both; 
 
    \t color: #000; 
 
    \t font-weight: bold; 
 
    \t line-height: 48px; 
 
    \t word-spacing: 0.5em; 
 
    } 
 
    .page-link a:link, 
 
    .page-link a:visited { 
 
    \t background: #f1f1f1; 
 
    \t color: #333; 
 
    \t font-weight: normal; 
 
    \t padding: 0.5em 0.75em; 
 
    \t text-decoration: none; 
 
    } 
 
    .home .sticky .page-link a { 
 
    \t background: #d9e8f7; 
 
    } 
 
    .page-link a:active, 
 
    .page-link a:hover { 
 
    \t color: #ff4b33; 
 
    } 
 
    body.page .edit-link { 
 
    \t clear: both; 
 
    \t display: block; 
 
    } 
 
    #entry-author-info { 
 
    \t background: #f2f7fc; 
 
    \t border-top: 4px solid #000; 
 
    \t clear: both; 
 
    \t font-size: 14px; 
 
    \t line-height: 20px; 
 
    \t margin: 24px 0; 
 
    \t overflow: hidden; 
 
    \t padding: 18px 20px; 
 
    } 
 
    #entry-author-info #author-avatar { 
 
    \t background: #fff; 
 
    \t border: 1px solid #e7e7e7; 
 
    \t float: left; 
 
    \t height: 60px; 
 
    \t margin: 0 -104px 0 0; 
 
    \t padding: 11px; 
 
    } 
 
    #entry-author-info #author-description { 
 
    \t float: left; 
 
    \t margin: 0 0 0 104px; 
 
    } 
 
    #entry-author-info h2 { 
 
    \t color: #000; 
 
    \t font-size: 100%; 
 
    \t font-weight: bold; 
 
    \t margin-bottom: 0; 
 
    } 
 
    .entry-utility { 
 
    \t clear: both; 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    \t line-height: 18px; 
 
    } 
 
    .entry-meta a, 
 
    .entry-utility a { 
 
    \t color: #777; 
 
    } 
 
    .entry-meta a:hover, 
 
    .entry-utility a:hover { 
 
    \t color: #ff4b33; 
 
    } 
 
    #content .video-player { 
 
    \t padding: 0; 
 
    } 
 

 

 
    /* =Asides 
 
    -------------------------------------------------------------- */ 
 

 
    .home #content .format-aside p, 
 
    .home #content .category-asides p { 
 
    \t font-size: 14px; 
 
    \t line-height: 20px; 
 
    \t margin-bottom: 10px; 
 
    \t margin-top: 0; 
 
    } 
 
    .home .hentry.format-aside, 
 
    .home .hentry.category-asides { 
 
    \t padding: 0; 
 
    } 
 
    .home #content .format-aside .entry-content, 
 
    .home #content .category-asides .entry-content { 
 
    \t padding-top: 0; 
 
    } 
 

 

 
    /* =Gallery listing 
 
    -------------------------------------------------------------- */ 
 

 
    .format-gallery .size-thumbnail img, 
 
    .category-gallery .size-thumbnail img { 
 
    \t border: 10px solid #f1f1f1; 
 
    \t margin-bottom: 0; 
 
    } 
 
    .format-gallery .gallery-thumb, 
 
    .category-gallery .gallery-thumb { 
 
    \t float: left; 
 
    \t margin-right: 20px; 
 
    \t margin-top: -4px; 
 
    } 
 
    .home #content .format-gallery .entry-utility, 
 
    .home #content .category-gallery .entry-utility { 
 
    \t padding-top: 4px; 
 
    } 
 

 

 
    /* =Attachment pages 
 
    -------------------------------------------------------------- */ 
 

 
    .attachment .entry-content .entry-caption { 
 
    \t font-size: 140%; 
 
    \t margin-top: 24px; 
 
    } 
 
    .attachment .entry-content .nav-previous a:before { 
 
    \t content: '\2190\00a0'; 
 
    } 
 
    .attachment .entry-content .nav-next a:after { 
 
    \t content: '\00a0\2192'; 
 
    } 
 

 

 
    /* =Images 
 
    -------------------------------------------------------------- */ 
 

 
    /* 
 
    Resize images to fit the main content area. 
 
    - Applies only to images uploaded via WordPress by targeting size-* classes. 
 
    - Other images will be left alone. Use "size-auto" class to apply to other images. 
 
    */ 
 
    img.size-auto, 
 
    img.size-full, 
 
    img.size-large, 
 
    img.size-medium, 
 
    .attachment img, 
 
    .widget-container img { 
 
    \t max-width: 100%; /* When images are too wide for containing element, force them to fit. */ 
 
    \t height: auto; /* Override height to match resized width for correct aspect ratio. */ 
 
    } 
 
    .alignleft, 
 
    img.alignleft { 
 
    \t display: inline; 
 
    \t float: left; 
 
    \t margin-right: 24px; 
 
    \t margin-top: 4px; 
 
    } 
 
    .alignright, 
 
    img.alignright { 
 
    \t display: inline; 
 
    \t float: right; 
 
    \t margin-left: 24px; 
 
    \t margin-top: 4px; 
 
    } 
 
    .aligncenter, 
 
    img.aligncenter { 
 
    \t clear: both; 
 
    \t display: block; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    } 
 
    img.alignleft, 
 
    img.alignright, 
 
    img.aligncenter { 
 
    \t margin-bottom: 12px; 
 
    } 
 
    .wp-caption { 
 
    \t background: #f1f1f1; 
 
    \t line-height: 18px; 
 
    \t margin-bottom: 20px; 
 
    \t max-width: 632px !important; /* prevent too-wide images from breaking layout */ 
 
    \t padding: 4px; 
 
    \t text-align: center; 
 
    } 
 
    .wp-caption img { 
 
    \t margin: 5px 5px 0; 
 
    \t max-width: 622px; /* caption width - 10px */ 
 
    } 
 
    .wp-caption p.wp-caption-text { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    \t margin: 5px; 
 
    } 
 
    .wp-smiley { 
 
    \t margin: 0; 
 
    } 
 
    .gallery { 
 
    \t margin: 0 auto 18px; 
 
    } 
 
    .gallery .gallery-item { 
 
    \t float: left; 
 
    \t margin-top: 0; 
 
    \t text-align: center; 
 
    \t width: 33%; 
 
    } 
 
    .gallery-columns-2 .gallery-item { 
 
    \t width: 50%; 
 
    } 
 
    .gallery-columns-4 .gallery-item { 
 
    \t width: 25%; 
 
    } 
 
    .gallery img { 
 
    \t border: 2px solid #cfcfcf; 
 
    } 
 
    .gallery-columns-2 .attachment-medium { 
 
    \t max-width: 92%; 
 
    \t height: auto; 
 
    } 
 
    .gallery-columns-4 .attachment-thumbnail { 
 
    \t max-width: 84%; 
 
    \t height: auto; 
 
    } 
 
    .gallery .gallery-caption { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    \t margin: 0 0 12px; 
 
    } 
 
    .gallery dl { 
 
    \t margin: 0; 
 
    } 
 
    .gallery img { 
 
    \t border: 10px solid #f1f1f1; 
 
    } 
 
    .gallery br+br { 
 
    \t display: none; 
 
    } 
 
    #content .attachment img {/* single attachment images should be centered */ 
 
    \t display: block; 
 
    \t margin: 0 auto; 
 
    } 
 

 

 
    /* =Navigation 
 
    -------------------------------------------------------------- */ 
 

 
    .navigation { 
 
    \t color: #777; 
 
    \t font-size: 12px; 
 
    \t line-height: 18px; 
 
    \t overflow: hidden; 
 
    } 
 
    .navigation a:link, 
 
    .navigation a:visited { 
 
    \t color: #777; 
 
    \t text-decoration: none; 
 
    } 
 
    .navigation a:active, 
 
    .navigation a:hover { 
 
    \t color: #ff4b33; 
 
    } 
 
    .nav-previous { 
 
    \t float: left; 
 
    \t width: 50%; 
 
    } 
 
    .nav-next { 
 
    \t float: right; 
 
    \t text-align: right; 
 
    \t width: 50%; 
 
    } 
 
    #nav-above { 
 
    \t margin: 0 0 18px 0; 
 
    } 
 
    #nav-above { 
 
    \t display: none; 
 
    } 
 
    .paged #nav-above, 
 
    .single #nav-above { 
 
    \t display: block; 
 
    } 
 
    #nav-below { 
 
    \t margin: -18px 0 0 0; 
 
    } 
 

 

 
    .clear { 
 
    \t clear: all; 
 
    }
<div id="wrapper" class="hfeed"> 
 

 
     
 
     
 

 
    \t 
 
    <div class="main-top"></div> 
 
    <div id="main"> 
 
    \t \t <div id="container" class="one-column"> 
 
    \t \t \t <div id="content" role="main"> 
 
    \t \t \t 
 
    \t \t \t <div id="content-text"> 
 
    \t \t \t \t \t \t \t 
 

 
    \t \t \t \t <div id="post-101" class="post-101 page type-page status-publish hentry"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <h1 class="entry-title">Peeronauten</h1> 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t <div class="entry-content"> 
 
    \t \t \t \t \t \t <p>Text fehlt.</p> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div><!-- .entry-content --> 
 
    \t \t \t \t </div><!-- #post-## --> 
 

 
    \t \t \t \t 
 

 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t 
 
    \t \t \t \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=103"><img width="280" height="133" src="http://philippdaub.de/peer23/wp-content/uploads/2014/02/huber-300x143.jpg" class="thumb-image wp-post-image" alt="huber"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=103"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>Andreas Huber</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=103">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=105"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=105"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>DMA</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Die Veranstaltungstechniker eures Vertrauens und das Event eures Lebens! <a href="http://philippdaub.de/peer23/?page_id=105">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=107"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=107"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>Nähatelier</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=107">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=109"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=109"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>Studio23</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in neque ante.</p> 
 
    <p> <a href="http://philippdaub.de/peer23/?page_id=109">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=140"><img width="280" height="185" src="http://philippdaub.de/peer23/wp-content/uploads/2014/07/fechthut-300x199.jpg" class="thumb-image wp-post-image" alt="fechthut"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=140"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>Fecht-Hut</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Westliche Kampfkunst lernen und erleben mit fast allen Waffen, die Klingen haben und mehr… denn der Westen hat einiges zu bieten.</p> 
 
    <p> <a href="http://philippdaub.de/peer23/?page_id=140">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t  <div class="child-thumb"> 
 
    \t \t \t  \t <div class="bilderrahmen-wrapper"> 
 
    \t \t \t \t  \t <div class="bilderrahmen"></div> 
 
    \t \t \t \t \t  <div class="thumb"> 
 
    \t \t \t \t \t \t  <a href="http://philippdaub.de/peer23/?page_id=161"></a> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t <div class="plakette_wrapper"> 
 
    \t \t \t \t \t \t <a class="plakette" href="http://philippdaub.de/peer23/?page_id=161"> 
 
    \t \t \t \t \t \t \t \t <div class="left"></div> 
 
    \t \t \t \t \t \t \t \t <span>Marky’s Schweisspalast</span> 
 
    \t \t \t \t \t \t \t \t <div class="right"></div> 
 
    \t \t \t \t \t \t </a> \t \t \t \t \t 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t  \t  
 
    \t \t \t  
 
    \t \t \t   
 
    \t \t \t   
 
    \t \t \t   <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=161">Weiterlesen <span class="meta-nav">→</span></a></p> 
 
     
 
    \t \t \t   
 
    \t \t \t  </div> 
 
    \t \t \t  \t \t \t 
 
    \t \t \t <div class="clear"></div> 
 
    \t \t \t </div><!-- #content --> 
 
    \t \t </div><!-- #container --> 
 
    </div> 
 
    <div class="main-bottom"></div> 
 
    \t </div><!-- #main -->

你有任何想法是什麼問題？

來源

2014-09-23 Philastan

+0

cute webzone。我喜歡海盜。 – naomik 2014-09-23 00:14:34

+1

像瑪麗（或更快）說這樣做#content {font-size：0px;} 如果這些是關鍵幀動畫，他們會殺死我的瀏覽器:( – 2014-09-23 00:46:07

+1

我認爲關鍵幀動畫讓我暈船。 ！:) – misterManSam 2014-09-23 03:16:52

回答

2

更新你的CSS像下面得到一個完美的輸出。希望這可以幫助！！！

.child-thumb { 
    display: inline-block; 
    margin: 15px 10px; 
    text-align: left; 
    vertical-align: top; 
    width: 282px; 
} 

#content { 
    text-align: center; 
}

來源

2014-09-23 06:12:47 Aru

+0

感謝您的回答！ :) – Philastan 2014-09-24 16:19:25

+0

我想upvote，但我沒有足夠的聲譽... – Philastan 2014-09-24 16:41:07

+0

沒有問題！感謝您的迴應！希望你現在更新你的網站！ – Aru 2014-09-25 05:37:21

2

您可以通過執行以下操作來解決問題。

- 設置font-size: 0;到#content

- 設置font-size:16px;，display:inline-block;和vertical-align:top;到.child-thumb

- 刪除float: left;到.child-thumb

更改你CSS像這個：

#content { 
    margin: 0px 0 36px 0; 
    font-size: 0; /* font-size: 0; to remove the white-space between inline-block elements */ 
} 
.child-thumb { 
    width: 282px; 
    /* float: left; */ /* remove the float: left; */ 
    margin: 15px; 
    display: inline-block; 
    font-size: 16px; /* font-size: 16px; to reset the font-size to child elements */ 
    vertical-align: top; /* align inline-block elements to top */ 
}

我試圖用float: left;來解決這個問題，但它對我沒有任何作用。

來源

2014-09-23 00:17:45 Anonymous

+1

哇，工作！非常感謝你！！！ – Philastan 2014-09-24 16:16:49

0

我使用螢火蟲來檢測你的問題，我發現你的問題的原因。 

Die Veranstaltungstechniker eures Vertrauens und das Event eures Lebens!

這句話太長了，不適合這個位置。
有兩種方法來解決你的問題：

  1. 改變句子上述如切割簡短。
  2. 使child-thumb類的孩子p具有統一的身高。

來源

2014-09-23 02:18:56

相關問題

 相關問題