Question

<div id="headerText">
 <h1>Ur Title</h1>
</div>
<div id="headerIcon">
 <div id="icon">
  <div class="icon-list"></div>
  <div class="icon-list"></div>
  <div class="icon-list"></div>
 </div>
</div>

我希望将headerText和headerIcon并排排列 - headerIcon的大小固定为30px - headerText将扩展剩余宽度。

我已经尝试过calc，它工作正常，但我听说在某些Android平台上不支持calc。

Answer 1

您可以通过以下结构来实现结果。

首先使用#headerIcon样式保留float:right，然后#headerText

<div id="headerIcon">
 <div id="icon">
  <div class="icon-list">1</div>
  <div class="icon-lienter code herest">2</div>
  <div class="icon-list">3</div>
 </div>
</div>    
<div id="headerText">
 <h1>Ur Title</h1>
</div>

<强> working jsFiddle File

Answer 2

您可以尝试将它们包装在div中并使用表格显示：

sample

.wrap {
    display: table;
    width: 100%;
}
#headerText, #headerIcon {
    display: table-cell;
}
#headerIcon {
    background: red;
    width: 30px;
}
#headerText {
    background: silver;
}

Answer 3

jQuery中的解决方案是：

function alignWidth(){
var windowWidth = $(window).width();
var iconwidth= $('#headerIcon').width();

var newWidth= windowWidth-iconwidth;

$('#headerText').css('width', newWidth);
}

$(document).ready(function(){
    alignWidth();

    $(window).on('resize',function(){
            alignWidth();
        });

)};

未经测试......但如果您可以使用jQuery解决方案，则该工作正常...

响应式网页设计对齐流体和固定的Div

3 个答案: