在CSS和html中的位置問題

Question

我遇到了CSS問題。我有一個little image帶有問題：

第一部分顯示在「Contenido」塊爲空時出現的情況，以及第二部分出現時出現的情況。問題？第二個botton使用休息並出現在其他bootom下。我曾嘗試過兩種款式，但我無法用一件工作。我在CSS和HTML中有什麼？

<div class="nav-pad"> 
    <button id="previous_left" class="button_previous"> 
     <img src="/images/left-arrow.png"/> 
    </button> 
    <div id=info_left> 
     Here we could put some info but it give a problem 
    </div> 
    <button id="next_left" class="button_next"> 
     <img src="/images/right-arrow.png"/> 
    </button> 
</div> 

並在CSS我有這樣一條：

.nav-pad{ 
    padding: 0.2em; 
    postion: relative; 
} 
.button_next{ 
    float:right; 
    right:0 
} 
.button_previous{ 
    left:0; 
} 

任何線索我在做什麼不好？ 非常感謝！ Roberto

Answer 1

嗯，我的一個例子解決了。幫助你給我，給我一個線索來解決這個問題： 有了這個網站：

<div class="nav-pad">  
<button id="previous_left" class="button_previous"> 
    <img src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/> 
</button>  
<div id="info_left"> 
    Here we cdfgdfould put some info but it give a problem 
</div>   
<button id="next_left" class="button_next"> 
    <img src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/> 
</button> 
</div> 

這個CSS：

.nav-pad{ 
    padding: 0.2em; 
    border: solid 1px green; 
    overflow: auto; 
} 

.button_previous{ 
    float: left; 
    width : 15%; 
} 

.button_next{ 
    float:right; 
    width : 15%; 
} 
#info_left { 
    float: left; 
    width : 70%; 
} 

非常感謝！

Answer 2

您是否給出了nav-pad div的任何寬度，如果是，請將其刪除。

否則嘗試加入overflow:auto到導航墊類..

能否請您給我們一個樣本頁面，這種風格和內容，這樣我們就可以計算出確切的錯誤..

Answer 3

.nav-pad {} 
.button-next { display:inline-block } 
.button-previous { display:inline-block } 
#info-left { display:inline-block } 

Answer 4

來完成相同的佈局，我將做什麼是：

.nav-pad{ 
    padding: 0.2em; 
    clear:both; 
    overflow: hidden; 
} 
.button_next{ 
    float:right; 
} 
.button_previous{ 
    float: left; 
} 
#info_left{ 
    float: left; 
} 

Answer 5

我編輯你的HTML和CSS一點點，但我做了它的工作， 我仍然不確定你想要在這裏得到什麼。

代碼可能需要爲了得到更好的效果

點擊鏈接以改變波紋管參考答案

• http://jsfiddle.net/TkNDS/2/