亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

第二部分為什么我把文字區和圖片去位置換了，圖片卻不靠右

http://img1.sycdn.imooc.com//55d5e96e000167d013660498.jpg

如圖，第二部分，文字和圖片換了位置后，圖片不靠右，還和文字重疊，這種情況一般怎么修改請問？？


正在回答

9 回答

.gray-section
{
	background:?#252f34;
	color:#fff;
}
.gray-section?.img-section
{
	width:?45%;?
}
.img-section?img
{
	width:?100%;?
}
.gray-section?.text-section
{
	?width:?55%;
}
.article-preview?>?div
{
	float:?left;
}
.article-preview:nth-child(odd)?
{
	background-color:?rgba(0,0,0,0.05);
}
.article-preview:after
{
	content:?'';
	display:?block;
	clear:?both;?
}
.text-section
{
	position:?relative;
	top:?68px;
	left:?50px;
}
.text-section?h2
{
	margin-bottom:?20px;
}
.text-section?p
{
	font-size:?18px;
?	letter-spacing:?1px;
?	margin-right:?30px;
}
.text-section?.sub-heading
{
	font-size:?22px;
	margin-top:?0;
}


0 回復 有任何疑惑可以回復我~ 
<section?class="green-section">
????<div?class="wrapper">
???????<div>
????????????<h2>一個標題</h2>
?????????????<div?class="hr"></div>?
?????????????<p>lorem?ipsum?dolor?sit?amet,
?????????????consectetur?adipisicing?elit.</p>
???????</div>?
???????<div?class="icon-group">
????????????<span?class="icon">item1</span>
????????????<span?class="icon">item2</span>
????????????<span?class="icon">item3</span>
???????</div>?
?????</div>
?????</section>
????<section?class="gray-section">
??????<div?class="article-preview">
????????
??????<div?class="text-section">

??????<h2>愿得一人心</h2>?
??????<div?class="sub-heading">
??????????????白首不相離
????????????</div>
??????<p>lorem?ipsum?dolor?sit?amet,consectetur?adipisicing?elit.?Atque?natus?veniam?illo,vitae?nulla?quisquam?elit?officiis?minima?iure.</p>?
??????</div>
??????<div?class="img-section">
??????????<img?src="img/pic01.jpg"alt="">?
??????</div>
????</section>
??
?????<section?class="gray-section">
??????<div?class="article-preview">
????????<div?class="img-section">
??????????<img?src="img/pic02.jpg"alt="">?
??????</div>
??????<div?class="text-section">
??????<h2>愿得一人心</h2>?
??????<div?class="sub-heading">
??????????????白首不相離
????????????</div>
??????<p>lorem?ipsum?dolor?sit?amet,consectetur?adipisicing?elit.?Atque?natus?veniam?illo,vitae?nulla?quisquam?elit?officiis?minima?iure.</p>?
??????</div>
????</section>
????<section?class="gray-section">
??????<div?class="article-preview">
????????
??????<div?class="text-section">

??????<h2>愿得一人心</h2>?
??????<div?class="sub-heading">
??????????????白首不相離
????????????</div>
??????<p>lorem?ipsum?dolor?sit?amet,consectetur?adipisicing?elit.?Atque?natus?veniam?illo,vitae?nulla?quisquam?elit?officiis?minima?iure.</p>?
??????</div>
??????<div?class="img-section">
??????????<img?src="img/pic03.jpg"alt="">?
??????</div>
????</section>


0 回復 有任何疑惑可以回復我~

同樣遇到這個問題，誰有老師的源代碼么？？

Talk is cheap,show me your code...

0 回復 有任何疑惑可以回復我~

我也是這樣

0 回復 有任何疑惑可以回復我~

我也遇到一樣的問題，請問你解決了嗎？就是寬度對.text-section不起作用，寫了也不起作用

0 回復 有任何疑惑可以回復我~

你看看你這里是不是忘記寫了，我原來忘記了寫了，寫上去圖片的位置就對了，.gray-section .text-section{ width:55%; }

1 回復 有任何疑惑可以回復我~

我的也是這樣? 。同問

0 回復 有任何疑惑可以回復我~

你文字部分的上級元素限制寬度了吧導致右邊的圖片左浮動的時候向左移動了

0 回復 有任何疑惑可以回復我~

是不是右浮動了 你看看那個圖片

0 回復 有任何疑惑可以回復我~
#1

支昂張 提問者

沒有右浮動哦，就是寫了第一部分，然后復制下來的。只不過第二部分的圖在右邊，文字在左，于是把文字的div與圖片的div換了一下位置，但是圖片就不靠右。。不知道怎么解
2015-08-21 回復 有任何疑惑可以回復我~
#2

悅來店小二

求一份代碼？
2015-10-05 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
HTML5和CSS3扁平化風格博客
  • 參與學習       86790    人
  • 解答問題       406    個

HTML5與CSS3搭建超酷扁平化風格博客

進入課程

第二部分為什么我把文字區和圖片去位置換了，圖片卻不靠右

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號