效果如图：
直接上代码，具体看注释：
<header class="hasManyCity" id="header"> <!-- 左边部分。设置为左浮动，要设置宽度--> <div class="loc" style="float: left; width:40px; height: 100%; text-align: center; padding-top: 5px;"> <i class="icon iconfont"></i><br/>厦门 </div> <!-- 右边部分，设置为右浮动。要设置宽度--> <div class="msg" style="float: right;"> <i class="icon iconfont"></i><br/>消息 </div> <!-- 中间部分，不设置浮动（即float:none）和宽度（即 width:auto）；设置左右的margin，以便给左右部分留出空间，否则会重叠在左右部分上；该部分代码放在最后 --> <div style="margin-left: 50px; margin-right: 50px; padding-top: 10px;"> <div style="border: 1px solid #AAAAAA; height: 25px; background-color: #ffffff; border-radius: 10px;"> <i class="icon iconfont" style="float: left; padding: 5px 5px 0 5px;"></i> <i class="icon iconfont" style="float: right; padding: 5px 5px 0 5px;"></i> <div style="margin-left: 30px;margin-right: 30px; height:100%;"> <input type="text" style="border: 1px dotted green; width:100%; height: 100%;" /> </div> </div> </div> </header>
相关推荐
### 三栏布局——左右宽度固定，中间自适应宽度 在网页设计中，三栏布局是一种常见的布局方式，尤其适用于需要展示多部分信息且结构清晰的页面。这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容...
对于中间栏，我们不需要再设定其浮动方式，只需要让它有左边外边距永远保持左栏和右栏的宽度，便实现了两边各让出一定距离的自适应宽度。这样，中间栏的宽度将根据左右栏的间距变化自动适应。 在实现这种布局方式时...
本文将详细探讨如何使用这些标签以及CSS来实现一个上下固定、中间自适应的布局。 首先，`<header>`标签用于定义页面的头部，通常包含网站的logo、导航链接等元素。例如： ```html 网站标题 <li><a href="#...
<div class="flexible">中间自适应宽度</div> <div class="fixed-width">右侧固定宽度</div> </div> ``` 在这个示例中，`.container` 使用 `display: flex;` 创建一个弹性布局容器，`justify-content: space-...
首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...
独行DIV自适应宽度布局是CSS布局设计中的一个重要技巧，它允许元素根据浏览器窗口大小自动调整宽度，从而实现响应式设计。这种布局方式常用于创建单列布局，使得内容在不同设备上都能适配显示。 在CSS中，要实现...
<div class="center">中间栏，内容会自适应宽度</div> <div class="right">右侧栏</div> </div> ``` 在这个例子中，我们使用了Flexbox布局模型，通过`display: flex`使`.container`变为一个弹性容器。`.left`...
"CSS三列布局两端固定宽度中间自适应"是一种常见的网页布局模式，它允许页面的两侧栏宽度固定，而中间主要内容区域则根据浏览器窗口大小自适应调整。这种布局方式能够很好地平衡内容展示和用户体验，尤其适用于内容...
在CSS3中，`background-image`属性极大地扩展了对背景图片处理的能力，使得在一个单一的HTML元素（如div）上设置多个背景图片成为可能。这个特性显著提高了网页设计的灵活性和创意性，减少了以往需要通过嵌套div来...
【详解左右宽度固定中间自适应HTML布局解决方案】 在网页设计中，经常遇到一种布局需求：左右两侧的元素宽度固定，而中间的元素则根据屏幕大小自适应调整宽度。这种布局方式能够灵活适应不同设备和屏幕尺寸，提升...
在众多布局需求中，实现“两边固定、中间自适应”的页面布局是一个常见的设计需求。它指的是页面的左、右两侧内容区域宽度固定，而中间的内容区域能够自适应剩余空间的宽度。这种布局在响应式网页设计中尤为常见。在...
- 三列布局可以分为自适应宽度或固定宽度，原理类似两列布局，但需要处理中间列与两侧列的关系，可能需要用到`float`、`margin`以及可能的负边距技巧来调整布局。 5. **XHTML的块级元素（div）和内联元素（span）*...
在CSS布局设计中，创建一个三栏式布局并让中间一栏自适应宽度，并随着文字内容的多少自动调整，是一项常见的需求。这个问题在百度面试中被提及，要求中间的紫色栏（在这里用`.name`类表示）根据文字的大小变化其宽度...
还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...
本篇讨论的知识点，是如何设计一个左右两列自适应，中间列内容随中间列内容高度自适应的布局。 首先，我们要知道如何使用CSS来控制布局，以及HTML结构对于布局的支持。传统的表格布局因为灵活性差和扩展性差等问题...
CSS3盒布局可以让开发者更方便地实现自适应宽度布局。下面是一个简单的示例代码： ```html <!DOCTYPE HTML> ; charset=utf-8"> 自适应宽度，左右两栏固定宽度，中间栏优先加载 .container{ display:-moz-box...
今天写一个供给大家参考学习，希望大家可以在这个基础上衍生一些其他的，比如三栏布局的那种：左右固定，中间自适应的效果等等 使用方法： 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
2. **一列自适应宽度布局**：在`CSS网页布局入门教程2：一列自适应宽度.doc`里，你将学习如何让页面宽度根据浏览器窗口大小自动调整。这通常通过设置`div`的`width`为百分比，如`width: 100%;`来实现。 3. **一列...