Question

我遇到了CSS问题。我有little image问题：

第一部分显示了在“Contenido”块中它发生了什么，它是空的，第二部分是什么。问题？第二个按钮使用休息并出现在另一个按钮下面。我尝试了一对风格，但我无法使用一个有效的风格。我在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;
}

任何线索我做得不好？非常感谢！罗伯特

Answer 1

我稍微编辑了你的HTML和CSS但是我让它工作了，我仍然不确定你想要到达这里。

代码可能需要更改以获得更好的结果

点击下面的链接查看答案示例

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

Answer 2

你为nav-pad div提供了任何宽度，如果是，则删除它。

请尝试将 overflow:auto 添加到nav-pad类..

请您给我们一个包含此样式和内容的示例页面，以便我们找出确切的错误..

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：

<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%;
}

非常感谢！

CSS和html中的位置问题

5 个答案: