css - 询问侧边栏

Question

我想把这个元素从侧边栏移到这个左边的空间区域，但我不能我认为这段代码有问题

Screenshot

<div class='clear'/>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=4692355700320814336&widgetType;=HTML&widgetId;=HTML7&action;=editWidget&sectionId;=sidebar-left' onclick='return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML7&quot;));' target='configHTML7' title='تحرير'>
<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>

</span>
<div class='clear'/>

</div><div class='widget HTML' data-version='1' id='HTML4'>

<h2 class='title'>تابعنى على الفيس بوك</h2>

<div class='widget-content'>

<iframe allowtransparency='true' frameborder='0' height='180' scrolling='no' src='https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F%D8%A5%D9%8A%D9%87%D8%A7%D8%A8-%D8%A8%D9%84%D9%88%D8%AC-%D9%84%D9%84%D8%AA%D9%82%D9%86%D9%8A%D8%A9-%D9%88%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-1481672011862823andtabs;.width=280.height=180.small_header=false.adapt_container_width=true.hide_cover=false.show_facepile=true.appId=1426898060671616' style='border:none;overflow:hidden' width='300'/>

</div>

CSS 代码

#sidebar-wrapper-left {margin:0 auto;}

#sidebar-wrapper-right {margin:0 auto;}

#sidebar-wrapper-center {margin:0 auto;}
.clear {
clear: both;
}
@media (max-width: 767px) {
#footer-container {
text-align: center;
}
#copyright {
display: block !important;
}
.social-menu {
float: none !important;
}
/*- - - - -Sidebar- - - - */
#sidebar-wrapper-left .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px}
#sidebar-wrapper-left .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}
#sidebar-wrapper-left .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px}
#sidebar-wrapper-left h2{border-radius: 0;background:#254E71;color:#fff;clear: both;
font-family:Lobster,ge_dinar_tworegular;font-size:18px;font-weight:normal;margin:0px;border: 5px solid;padding: 7px 65px 5px 0px;position:relative;transition:all .5s ease-out}
#sidebar-wrapper-left h2:before{ content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#sidebar-wrapper-left h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;}
#sidebar-wrapper-right .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px}
#sidebar-wrapper-right .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}
#sidebar-wrapper-right .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px}
#sidebar-wrapper-right h2{border-radius: 0;background:#254E71;color:#fff;font-family:Lobster,ge_dinar_tworegular;font-size:17px;font-weight:normal;margin:0px;clear: both;padding: 7px 55px 5px 0px;position:relative;transition:all .5s ease-out; border-bottom: 1px solid #eee;border: 5px solid;}
#sidebar-wrapper-right h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;}
#sidebar-wrapper-right h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
=
#PopularPosts1 h2:before{ content: '\f016'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#ContactForm1 h2:before{ content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#PageList1 h2:before{ content: '\f097'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#BlogArchive1 h2:before{ content: '\f0c7'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#Image1 h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#HTML3 h2:before { content: '\f059'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#FollowByEmail1 h2:before {content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px;}
#Followers1 h2:before {content: '\f0c0'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#HTML2 h2:before {}
.sidebar h2:before { content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#HTML1 h2:before { content: '\f0e6'; font-family: FontAwesome; font-style: normal; font-weight: normal;
top: 0; bottom: 0;right: 0; position: absolute; padding: 0.4px 13px;
background: #F74047; color: #fff; line-height: 37px;}
#Label1 h2:before {content: '\f02c';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
#BlogArchive h2:before {content: '\f187';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
#BImage1:before {content: '\f005';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
.quickedit{display:none;}
html {overflow-x: hidden;}

“&”有问题 请告诉我我该怎么做...

如果您想查看该页面的来源，这是该网站 http://shefoblog.blogspot.com.eg/

Answer 1

类 .post-thumb-oi-web 有宽度，但没有 float ，这就是为什么你的主容器和侧边栏不是并排的。 我建议您为主要内容的容器提供宽度和 float ，这似乎是 .date-posts。

.date-posts {
   float: right;
   width: 821px;
}

应该可以做到这一点，然后您可以从 .post-thumb-oi-web 中删除宽度。