Html 响应灵敏的网页设计使流体和固定div保持一致 你的头衔

我想将

标题文本

和

标题文本

并排对齐。
-headerIcon的尺寸固定为30px。
-headerText将扩展剩余宽度

---

我尝试过calc，它工作正常，但我听说有些android平台不支持calc。

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

---

jQuery中的一个解决方案是：

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

---

未测试…但如果您可以使用jQuery解决方案，则应该可以工作…

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

首先使用

float:right

样式，然后使用

#headerText

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();
        });

)};

1.
2.
3.
你的头衔

---

您好，谢谢您的快速回复。但是我想坚持使用CSS唯一的解决方案。也许这对其他人有帮助。祝你解决问题好运：）嗨，谢谢你的快速回复。您提供的答案很好，但为了实现解决方案，我必须更改div的语义。

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();
        });

)};

<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>