css - 为什么在 alignnleft 存在的情况下，wordpress 中的所有文本都不会环绕帖子图像？

Question

下面是我的 wordpress 主题的 style.css。当我写一篇文章并插入一张图片时，只有几行文字环绕在图片周围，其余的则低于图片底部。文本的右侧有足够的空间。我在wordpress中插入图像时选择左对齐，但仍然有问题。这个css可能有问题吗？

body {
background:#000 url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
font-family:"proxima-nova-1", "proxima-nova-2", Helvetica, sans-serif !important;
font-size:15px;
}

.first {
margin-left:0 !important;
}

.last {
margin-right:0 !important;
}

.alpha {
margin-top:0 !important;
}

.first-pad {
padding-left:0 !important;
}

.last-pad {
padding-right:0 !important;
}

.alpha-pad {
padding-top:0 !important;
}

.omega-pad {
padding-bottom:0 !important;
}

.offset-top {
top:0;
}

.offset-bottom {
bottom:0;
}

.offset-left {
left:0;
}

.offset-right {
right:0;
}

.text-left {
text-align:left;
}

.text-center {
text-align:center;
}

.text-right {
text-align:right;
}

mark,.search-term {
background:#EBE16F;
}

.help,.info,.error,.success {
margin:10px;
padding:5px 18px;
border:1px solid #cecece;
}

.help {
border-color:#E0C618;
background:#EBE16F;
}

.info {
border-color:#92cae4;
background:#d5edf8;
}

.error,.dsq-kb24 {
border:none;
background:#FFF;
margin:0 0 70px;
padding:21px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}

.success {
border-color:#c6d880;
background:#e6efc2;
}

.relative {
position:relative;
}

.absolute {
position:absolute;
}

.nega {
z-index:-1;
}

a,a:visited {
color:#969696;
}

a: link {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
font-weight:500;
}

h1 a,.h1 a,h2 a,.h2 a,h3 a,.h3 a,h4 a,.h4 a,h5 a,.h5 a {
text-decoration:none;
}

h1,.h1 {
font-size:2.5em;
line-height:1.333em;
margin:0.7em 0;
}

h2,.h2 {
font-size:24px;
line-height:1;
font-weight:700;
}

h3,.h3 {
font-size:1.125em;
}

h4,.h4 {
font-size:1.1em;
font-weight:700;
}

h5,.h5 {
font-size:0.846em;
line-height:2.09em;
text-transform:uppercase;
letter-spacing:2px;
}

#logo {
margin:1.1em 0;
}

#container {
margin:0 auto;
padding:28px 0 49px;
width:980px;
}

header hgroup h1 {
margin:0;
width:287px;
padding:15px 0;
float:left;
}

header hgroup h1 a {
background:url('images/logo.png') no-repeat 0 0;
display:block;
height:40px;
outline:none;
text-indent:-9999px;
}

header hgroup p {
width:224px;
margin:0;
float:right;
position:relative;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
-o-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}

.translate-span {
text-decoration:none;
color:#666;
font-weight:normal;
}

header hgroup #search #searchform input {
height:42px;
padding:0 14px;
margin:0 42px 0 0;
border:none;
outline:none;
line-height:1;
background-color:#E1E1E1;
-webkit-border-radius:3px 0 0 0;
-moz-border-radius:3px 0 0;
-o-border-radius:3px 0 0 0;
border-radius:3px 0 0 0;
-webkit-transition:background-color 0.3s ease-in-out;
-moz-transition:background-color 0.3s ease-in-out;
-o-transition:background-color 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
font-family:"proxima-nova-1", "proxima-nova-2", Helvetica, sans-serif !important;
}

header hgroup #search #searchform input:active,header hgroup #search #searchform input:hover,header hgroup #search #searchform input:focus {
background-color:#fff;
}

header hgroup #search #searchform #searchsubmit {
height:42px;
width:42px;
margin:0;
padding:0;
border:none;
outline:none;
text-indent:-999em;
background:transparent url('images/btnsearch.png') no-repeat;
}

header hgroup #search #searchform #searchsubmithover {
height:42px;
width:42px;
background:transparent url('images/btnsearch-hvr.png') no-repeat;
}

header hgroup .top-social {
float:left;
margin-top:35px;
margin-left:440px;
}

header hgroup .top-social a {
margin-left:16px;
float:left;
display:block;
height:20px;
}

header hgroup .top-social a.tw {
background:transparent url('images/kb-tw.png') no-repeat;
width:27px;
}

header hgroup .top-social a.fb {
background:transparent url('images/kb-fb.png') no-repeat;
width:11px;
}

nav {
width:100%;
background:#000;
float:left;
-webkit-border-radius:3px 0 0 0;
-moz-border-radius:3px 0 0;
-o-border-radius:3px 0 0 0;
border-radius:3px 0 0 0;
}

nav ul li a {
color:#0ff;
display:block;
float:left;
font-size:20px;
height:40px;
padding:16px 15px 0 26px;
text-decoration:none;
line-height:20px;
}

nav ul li a:hover,nav ul li a:active,nav ul li a:visited {
color:#0ff;
}

nav ul li a.kb-china {
background:transparent url('images/kb-china.gif') no-repeat 112px 23px;
padding:16px 44px 0 21px;
}

.china {
position:fixed;
right:110px;
top:0;
padding:1px 7px 0;
background:#000;
border-bottom:1px solid #444;
z-index:9999;
}

header section span {
float:left;
width:224px;
}

#main {
background:#e1e1e1;
}

.hero {
height:400px;
overflow:hidden;
width:980px;
}

.slides_container {
width:980px;
height:400px;
}

.slides_container div {
width:980px;
height:400px;
display:block;
}

.slide-bot {
width:53px;
height:53px;
top:50%;
margin-top:-26px;
z-index:999;
cursor:pointer;
}

.slide-prev {
background:url('images/arrow-left.png');
left:15px;
}

.slide-next {
background:url('images/arrow-right.png');
right:15px;
}

#single-banner {
width:980px;
background-color:#282828;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center center;
}

#single-banner hgroup {
margin:0;
padding:210px 0 0;
}

#single-banner hgroup h2 {
margin:0;
padding:21px 28px;
font-size:50px;
text-transform:uppercase;
font-weight:800;
color:#FFF;
background-color:rgba(56, 56, 56, 0.6);
}

#banner {
width:980px;
background:#eee url('images/bg-header.jpg') center center;
}

#banner h2 {
margin:0;
padding:21px 28px;
font-size:50px;
text-transform:uppercase;
font-weight:800;
color:#393939;
}

#banner h2 span {
font-weight:300;
}

#single-updates {
margin:0;
padding:28px;
background:#2f343a url('images/scale-bg.gif') repeat;
}

#updates {
margin:0;
padding:28px 28px 0;
background:transparent url('images/bg-\A \A bottom.png') bottom center no-repeat;
}

#updates-container {
background:#2f343a url ('images/scale-bg.gif') repeat;
}

#updates article,#single-updates article {
width:924px;
height:168px;
margin:0 0 28px;
background-color:#FFF;
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
-webkit-transition:background-color 0.3s ease-in-out;
-moz-transition:background-color 0.3s ease-in-out;
-o-transition:background-color 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}

#single-updates article {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
height:auto;
padding:0;
margin:0 auto;
}

#single-updates article article.post_content {
height:auto;
padding:21px;
}

#updates article:hover {
background-color:#EDEDED;
}

#updates article figure {
width:294px;
height:100%;
background:#0a0a0a url('images/def-update.gif') no-repeat center center;
}

#updates article figure a {
width:294px;
height:100%;
display:block;
}

#updates article div {
width:630px;
height:100%;
position:relative;
}

#updates article div h2 {
margin:0;
padding:12px 21px;
background-color:#ededed;
-webkit-border-radius:0 3px 0 0;
-moz-border-radius:0 3px 0 0;
-o-border-radius:0 3px 0 0;
border-radius:0 3px 0 0;
-webkit-transition:background-color 0.3s ease-in- out;
-moz-transition:background-color 0.3s ease-in-out;
-o-transition:background- color 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}

#updates article div h2 a {
color:#5F7993;
-webkit-transition:color 0.3s ease-in-out;
-moz-transition:color 0.3s ease-in-out;
-o-transition:color 0.3s ease-in-out;
transition:color 0.3s ease-in-out;
}

#updates article:hover div h2 {
background-color:#C7CBCF;
}

#updates article div p {
margin:14px 21px;
font-size:13px;
}

#updates article div aside {
width:588px;
position:absolute;
bottom:0;
margin:0 21px;
padding:14px 0;
border-top:1px solid #ededed;
}

#single-updates article div aside {
width:882px;
bottom:0;
margin:0 21px;
padding:14px 0 12px;
border-bottom:1px solid #ededed;
}

#single-updates article div aside .left {
padding-top:5px;
}

#updates article:hover div aside {
border-top:1px solid #d8dbdf;
}

#updates article div aside a,#single-updates article div aside a {
float:left;
color:#969696;
padding-left:17px;
margin-right:21px;
font-size:13px;
line-height:1;
text-decoration:none;
background:transparent url('images/update-sprite.gif') no-repeat left top;
-webkit-transition:color 0.3s ease-in-out;
-moz-transition:color 0.3s ease-in-out;
-o-transition:color 0.3s ease-in-out;
transition:color 0.3s ease-in-out;
}

.calendar {
background-position:0 -1px !important;
}

.comment {
background-position:0 -14px !important;
}

#updates article div aside a:nth-child(3),#single-updates article div aside a:nth-child(3) {
background-position:0 -27px;
margin-right:0;
}

#updates article div aside a:nth-child(n+4),#single-updates article div aside a:nth-child(n+4) {
background:none;
padding-left:0;
margin-right:0;
}

#updates article div aside a:nth-child(n+4):before,#single-updates article div aside a:nth-child(n+4):before {
content:", ";
margin-right:7px;
}

#updates article div aside .post-edit-link,#single-updates article div aside .post-edit-link {
margin-left:21px;
background-position:0 -27px !important;
}

#updates aside,#media-updates aside {
margin:0 0 28px;
padding:0;
width:100%;
}

#updates aside div.navigation,#media-updates aside div.navigation {
margin:0;
padding:0;
font-size:21px;
font-weight:700;
display:block;
}

#updates aside div.navigation li *,#media-updates aside div.navigation li *,.btn,.button {
border:none;
padding:7px 14px;
color:#5F7993;
background-color:#EDEDED;
display:block !important;
float:left !important;
-webkit-transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-moz-transition:background-color 0.3s ease-in-out, color 0.3s ease-in- out;
-o-transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#updates aside div.navigation li .next,#updates aside div.navigation li .prev {
font-weight:300 !important;
}

#updates aside div.navigation li .prev {
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-ms-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.wp-paginate li {
float:left !important;
}

#single-updates article div aside ul {
margin:0;
width:265px;
}

ul.socialmedia li {
float:left;
display:inline;
height:23px;
width:80px;
}

ul.socialmedia li.t {
width:105px;
float:right;
}

ul.socialmedia li.g {
width:60px;
float:right;
}

#media-updates {
margin:0;
padding:28px 28px 0;
background:transparent url ('images/bg-bottom.png') bottom center no-repeat;
}

#media-updates .media-post {
width:294px;
margin:0 21px 28px 0;
}

#media-updates .media-post figure {
width:294px;
height:168px;
background:#EDEDED url('images/def-update.gif') no-repeat center center;
}

#media-updates .media-post figure h2 {
padding:12px;
margin:0;
}

#media-updates .media-post figure a {
width:294px;
height:168px;
display:block;
line-height:0;
color:#5F7993;
}

#media-updates .media-post figcaption {
width:294px;
background-color:#EDEDED;
}

#media-updates .media-post figcaption h3 {
margin:0;
padding:14px;
font-weight:700;
-webkit-transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-moz-transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-o-transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#media-updates .media-
post:hover figcaption h3 {
background-color:#C7CBCF;
color:#FFF;
}

#media-updates .media-post figcaption h3 a {
display:block;
color:#5F7993;
}

.jcarousel-prev,.jcarousel-next {
cursor:pointer;
height:53px;
width:53px;
top:210px;
position:absolute;
}

.banner-images {
height:112px;
}

.ads {
background:#fff;
margin:0;
padding:23px;
}

.ads li {
float:left;
list-style:none;
margin-right:11px;
width:304px;
}

.ads li:last-child {
margin-right:0;
}

.ads li a {
border:5px solid #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
display:block;
height:112px;
background-color:#393939;
}

footer {
background:#1b1b1b;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
-o-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
height:57px;
clear:both;
padding-top:0;
padding-right:30px;
padding-bottom:0;
padding-left:30px;
}

footer div {
width:920px;
float:left;
}

footer ul {
color:#707070;
float:left;
font-size:14px;
margin:0;
padding:20px 0 0;
list-style:none;
}

footer ul li:before {
content:"\00b7";
margin:0 5px;
}

footer ul li:first-child:before {
content:"";
margin:0;
}

footer ul li a {
color:#fff !important;
padding:0 3px;
text-decoration:none;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

footer ul li a:hover {
color:#c7cbcf !important;
}

footer span {
color:#fff;
float:right;
font-size:14px;
padding:20px 0 0;
}

footer a.hs3 {
float:right;
margin-top:18px;
}

footer a img {
zoom:1px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter:alpha(opacity=40);
-moz-opacity:0.4px;
-khtml-opacity:0.4px;
opacity:0.4px;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

footer a img:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:1px;
-khtml-opacity:1px;
opacity:1px;
}

.hentry {
padding:2.2em 20px 0;
}

.single-title,.page-title {
margin:0 0 0.375em;
}

.archive_title {
padding:0 20px;
margin:1.1em 0 0.75em;
}

.meta {
font-size:0.9em;
letter-spacing:0.05em;
line-height:1.75em;
color:#999;
margin:0.875em 0;
}

.post_content {
width:882px !important;
padding:14px;
}

.post_content p {
line-height:24px;
font-size:15px;
margin:0 auto 16px;
width:882px;
display:inline-block;
vertical-align:top;
zoom:1px;
}

.post_content h1 {
margin:0;
}

.post_content ul,.post_content ol,.post_content table,.post_content dl {
margin:1.5em 0;
}

.post_content ul,.post_content ol {
list-style-position:outside;
line-height:1.5;
margin-left:2.2em;
margin-right:2.2em;
}

.post_content li {
margin-bottom:0.75em;
}

.post_content ul li {
list-style-type:disc;
}

.post_content ol li {
list-style-type:decimal;
}

.post_content a {
color:#969696;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

.post_content pre {
font-family:"proxima-nova-1", "proxima-nova-2";
font-size:13px;
text-align:center;
line-height:18px;
color:#969696;
background:#F5F5F5;
width:852px;
margin:7px 0 0;
padding:7px 14px;
border:1px solid #EDEDED;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
display:inline-block;
vertical-align:top;
zoom:1px;
}

.post_content address,.post_content p.intro {
font-style:normal;
font-size:20px;
line-height:26px;
color:#999;
border-bottom:1px solid #EDEDED;
padding:0 0 21px;
margin-bottom:21px;
}

.post_content blockquote {
font-style:italic;
line-height:1.6em;
margin:1.5em 2.2em;
}

.post_content blockquote:before {
font-family:Georgia, serif;
content:"“";
font-size:2.75em;
text-indent:-0.8em;
margin-top:.1em;
float:left;
opacity:.3;
}

.post_content dl {
margin:1.75em 0;
}

.post_content dt {
margin-top:1.25em;
font-weight:700;
}

.post_content dd {
font-style:italic;
margin-top:0.5em;
line-height:1.6em;
}

.post_content img {
margin:0 0 1.5em;
max-width:100%;
}

.alignleft,img.alignleft {
margin-right:1.5em;
display:inline;
float:left;
}

.alignright,img.alignright {
margin-left:1.5em;
display:inline;
float:right;
}

.aligncenter,img.aligncenter {
margin-right:auto;
margin-left:auto;
display:block;
clear:both;
}

.post_content video {
margin:1.5em 0;
max-width:100%;
display:block;
}

.post_content object {
display:block;
margin:1.5em 0;
max-width:100%;
}

.post_content code {
font-size:0.9em;
line-height:1.7em;
background:#eee;
border:2px solid #cecece;
padding:1px;
}

.wp-caption {
margin-bottom:1.5em;
text-align:center;
padding-top:5px;
}

.wp-caption img {
border:0 none;
padding:0;
margin:0;
}

.wp-caption .wp-caption-text {
font-size:0.8em;
font-style:italic;
margin:.6em 0 -0.2em;
}

.hentry footer {
clear:both;
margin:1.5em 0 0;
padding-bottom:2.2em;
}

.gform_wrapper {
margin:0 !important;
float:left;
}

.gform_footer input.button,button,input[type="button"],input[type="reset"],input
[type="submit"] {
border:none;
outline-style:none;
padding:14px;
color:#5F7993;
background-color:#EDEDED;
font-weight:700;
font-family:"proxima-\A \A nova-1", "proxima-nova-2", Helvetica, sans-serif !important;
font-size:21px;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}

.gform_wrapper .ginput_complex .ginput_left label,.gform_wrapper .ginput_complex .ginput_right label {
text-transform:uppercase;
}

.gform_wrapper li,.gform_wrapper form li {
margin:0 0 14px;
}

.gform_wrapper form li input,.gform_wrapper form li textarea,#comment {
border:1px solid #DDD;
outline:none;
padding:7px;
background:#f5f5f5;
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
font-family:"proxima-nova-1", "proxima-nova-2", Helvetica, sans-serif !important;
font-size:13px;
}

.gform_wrapper form li textarea {
width:516px !important;
max-width:516px;
}

.gform_wrapper form li input:focus,.gform_wrapper form li textarea:focus,#comment:focus {
border:1px solid #ccc;
background:#fff;
}

.gform_wrapper .gform_footer {
margin:0;
padding:0;
}

#gforms_confirmation_message {
margin-top:33px !important;
width:539px;
float:left;
}

#comment {
width:866px;
}

div#comments-form h2#comments-header {
margin-top:28px;
}

div#comments-form .commentsSmall {
font-size:13px;
}

#comments li {
padding:21px 21px 7px;
border:1px #ddd solid;
list-style:none;
background:#f5f5f5;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin-top:14px;
margin-bottom:14px;
}

.commentText {
width:350px;
}

.dsq-kb24 ul,.dsq-kb24 ol {
list-style:none;
}

.omega,#disqus_thread,.dsq-trackback-url {
margin-bottom:0 !important;
}

.left,footer ul li,nav .nav-previous {
float:left;
}

.right,header hgroup #search #searchform,nav .nav-next {
float:right;
}

a:hover,a: focus,#updates article div aside a:hover,#single-updates article div aside a:hover,.post_content a:hover {
color:#5F7993;
}

::selection,::-moz-selection {
background:#e8b313;
color:#fff;
text-shadow:none;
}

header hgroup .top-social a.tw:hover,header hgroup .top-social a.fb:hover {
background-position:0 -20px;
}

#updates article div h2 a:hover,#updates article:hover div h2 a,#media-updates .media-
post:hover figcaption h3 a {
color:#FFF;
}

#updates aside div.navigation li a:hover,#updates aside div.navigation .current,#media-updates aside div.navigation li a:hover,#media-updates aside div.navigation .current,#updates aside div.navigation li .arrow:hover,.gform_footer input.button:hover,button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
color:#FFF;
background-color:#C7CBCF;
}

.post_content p:first-child,.comments-header {
margin-top:0;
}

.post_content p:last-child,.post_content h1:last-child,#commentform p.last-button,#comments-closed {
margin-bottom:0;
}

.gform_edit_link,#dsq-content #dsq-footer {
display:none !important;
}

Answer 1

尝试用这个替换你的图像的css：

.aligncenter{
display: block;
margin: 5px auto;
}
.alignright{
float: right;
margin: 5px;
}
.alignleft{
float: left;
margin: 5px;
}

这就是我在我的主题中使用的。您可以通过左/右对齐图像来使文本以不同的方式换行，或者有时最好使用 align none。