我正在尝试使用div而不是表来为我的内容设置样式框.内容可以是任何大小,并且需要允许浏览器在任何程度上调整大小.需要背景颜色和边框来包含内容.这适用于表格.如何让div以相同的方式工作？
注意:我添加了"_",因为我的不间断空格正在丢失.
替代文字http://www.c3o.com/div-like-table.JPG
内容:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
嗨我想给我的div一些边框但是当我做一个盒子是用所有的边框创建但是teh div的内容不被包围!有什么建议？
我搜索了一整天，但找不到我想做的事情的解决方案。我知道这个标题有很多问题，但没有一个对我有用。
我想做的是移动设备的触摸滚动。
这是我的html：
<body>
<div id="slider_container">
<div class="wrapper">
<span>Image</span>
</div>
</div>
</body>
最少有 2 个包含图像的跨度，最多有 10 个包含图像的跨度。会有一些php代码和跨度数会根据用户上传的照片而变化。
这是我的CSS代码：
body
{
width:100%;
overflow-x:hidden;
}
#slider_container
{
width:100%;
height:320px;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.wrapper
{
position:absolute;
height:320px;
}
.wrapper img
{
max-width:310px;
max-height:310px;
margin-right:5px;
float:left;
}
我想要的是给 .wrapper 自动宽度并溢出到 #slider_container 和 body 之外。
我希望我能说清楚。
感谢您的所有回答...
我已经在这个问题上附加了一个小提琴链接。我需要红点更接近文本。对于第一个和最后一个项目，它工作得很好..但是，如果任何项目是多行的..它在右边有多余的空格..我也希望点也更接近第二个项目的文本。我尝试了flex： 0，但会使整个文本区域变小。请帮忙！
<div class="container">
<div class="item">
<span class="icon">1</span>
<div class="text">News Section</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">2</span>
<div class="text">Sample123 Organizational announcement</div>
<span class="red"></span>
</div>
<div class="item">
<span class="icon">3</span>
<div class="text">Sample Text</div>
<span class="red"></span>
</div>
</div>
.container {
width:300px;
padding: .5em 1em;
}
.item {
display: flex;
}
.icon {
width: 18px;
float: left;
}
.text {
display: inline-block;
background: yellow;
}
.red {
margin: 0 0 0 0.5rem !important;
background: #FF0000;
padding: 0 !important;
width: .5rem;
height: .5rem;
border-radius: …我试图让一个图标浮动在有换行符的液体文本容器上。
问题是，当换行时，文本结束之前和div结束的地方有很大的差距。这使我的浮动元素从间隙结束的地方开始。
有没有办法让 div 只有其内容的大小？
检查此代码笔：https ://jsfiddle.net/e38edtdy/1/ 调整输出区域的大小以查看空间间隙。该按钮将自动调整其大小以查看间隙。
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>
我的想法是使divs 中具有该类的每个元素.main_content的宽度等于其中文本的宽度。我该怎么办？
正如您所看到的，每个（span、h2, p和h6）的宽度与 相同.main_content div。红色边框证明了这一点。
那么，如何使每个 div 的宽度适合这些 div 中的文本呢？（仅使用CSS）
.main_content {
width: 100%;
height: 400px;
font-weight: 800;
}
.main_content > * {
border: 1px solid red;
display: block;
margin-bottom: 30px;
text-align: center;
}<div class="first_article">
<div class="first_content">
<div class="main_content">
<span class="growth">Growth</span>
<h2>5 compelling user referral campaign examples</h2>
<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
</p>
<h6>Author</h6>
</div> …如果我有这样的HTML:
<div class="figure">
<img src="some_image.png" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>
有没有办法使用CSS,以便divwith类figure的宽度只大到足以包含图像和标题？我想在两者周围放一个矩形边框,但我不想猜测div的宽度(以像素为单位).
下面的示例(div.figure宽度似乎扩展以填充其可用宽度)
div.figure {
border: 1px solid black;
}<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>我有一组单选按钮和标签.单选按钮位于标签之前.我想将它们的集合置于字段集中.我尝试将它们放在显示设置为内联块的div中.几乎可以工作,但是一个标签会下降到下一行.
我的理解是给出一个div显示:inline-block会使它缩小到适合,但是我得到了你可以在这里看到的意外行为(代码如下):
http://jsfiddle.net/abalter/TedVe/13/
我唯一希望手动设置边距和内容吗？有没有办法理解为什么div正在缩小太多？
更新...如果我从标签中删除右边距(在下一个单选按钮之前添加空格)则适合.相反,如果我在按钮上添加margin-left,我仍然有问题.
<form>
<fieldset>
<legend>Test</legend>
<div>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Yes</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">No</label>
<input class="radio-input" type="radio" name="test" value="yes" />
<label class="radio-label">Maybe</label>
</div>
</fieldset>
.radio-label {
float: left;
margin-right: 3%;
}
.radio-input {
float: left;
}
fieldset {
text-align: center;
}
div {
display: inline-block;
margin: auto;
border: 1px solid black;
}
看看这个jsfiddle：
#content {
background: #ff0000;
min-height: 200px;
}
.container-fluid {
min-width: 2000px;
}
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Some title here</h1>
</div>
</div>
</div>
</div>
为什么#content 的宽度没有拉伸到 2000px 而不是视口的宽度？我需要做什么才能使内容拉伸，以便无论在容器流体上设置什么最小宽度#content 都将始终拉伸以适应它