100分提问“多个 DIV 同行并居中”的超难问题，望高手解答。

woniuke 2007-07-21 12:11:47
以下代码（CODE）已经实现了非完美的“多个 DIV 同行并居中”。
非完美，是因为此代码中 id="div2" 的 DIV 标签中 width 改为 10px 时，即不能实现。期望能解决 div2 能紧包其内容（内容为非固定宽度）。

因本人已经用所用知识试尽，希高手能在本地调试成功后给贴。
（仅用 DIV 或 SPAN 标签，不用 script 脚本）

如能完美解决的高手100分独享，
因考虑其问题是未知解的可能，希各位朋友能帮忙接分：）

CODE：

<div style="border:1px solid #00FF00;width:100%;height:26px;text-align:Center;">
<div id="div2" style="border:1px solid #0000FF;width:100px;height:26px;" align="center">
<div style="float:left;color:Red;border: 1px solid #000000;height:24px;width:24px;text-align:center;">
1
</div>
<div style="float:left;color:Red;border: 1px solid #000000;height:24px;width:24px;text-align:center;">
2
</div>
</div>
</div>
...全文
575 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
asharpnet 2010-04-27
  • 打赏
  • 举报
 回复
直接用table得了
liuqianqian 2010-04-27
  • 打赏
  • 举报
 回复
我也在等！
hij333 2007-07-27
  • 打赏
  • 举报
 回复
见到孟子．接分．
shuangbaby 2007-07-27
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
</head>

<body>


<style>
.div{
clear:right;border:1px solid #FF00FF;width:20px;height:26px; float:left;
}
</style>

<div style="border:1px solid #00FF00;width:100%;height:26px;">
<div id="div2" style="border:1px solid #0000FF;height:26px;width:10px;margin:0 auto;" >
<div class="div">1</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
<div class="div">2</div>
</div>
</div>

</body>
</html>
shuangbaby 2007-07-27
  • 打赏
  • 举报
 回复
看来这分该我接呀~

<style>
.div{
clear:right;border:1px solid #FF00FF;width:20px;height:26px; float:left;
}
</style>

<div style="border:1px solid #00FF00;width:100%;height:26px;">
<div id="div2" style="border:1px solid #0000FF;height:26px;width:10px;margin:0 auto;" >
<div class="div">1</div>
<div class="div">2</div>
</div>
</div>
飘零雾雨 2007-07-23
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
html,body {
margin:0;
font-size:12px;
text-align:center;
}
div {
overflow:hidden;
}
.dymid {
border:1px solid #0f0;
margin:0 auto;
}
.dy_main {
line-height:200%;
border:1px solid #00f;
margin:0 auto;
display:inline;
}
.dy_1 {
padding:4px 10px;
color:#f00;
border:1px solid #000;
display:inline;
}
</style>
</head>
<body>
<div class="dymid">
<div class="dy_main">
<div class="dy_1">1</div>
<div class="dy_1">2</div>
<div class="dy_1">3</div>
<div class="dy_1">4</div>
<div class="dy_1">5</div>
<div class="dy_1">n</div>
</div>
</div>
</body>
</html>
ldy9929 2007-07-22
  • 打赏
  • 举报
 回复
加入，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
后，span 的宽度显示就不是 24px 了
=====================================
问题是：你为什么要加入？
如果更少的代码能解决问题，为什么要用多余的代码
woniuke 2007-07-21
  • 打赏
  • 举报
 回复
虽然此问题，我用 table 取代了，但为了学习，只要有高手完美解决，我可再开贴100分独给。

注：此问题，仅用 DIV 或 SPAN 标签，不用 script 脚本。
woniuke 2007-07-21
  • 打赏
  • 举报
 回复
TO：storm0(飘零雾雨.闻弦歌而知雅意,顾叶落而晓秋至) ( )

可能是我之前表达的没能让你明白，照你的代码，如果
<div class="dymid">
<div class="dy_main">
<div class="dy_1">1</div> -
<div class="dy_1">2</div> |
... |---- 此中间 div 的个数不是固定的
<div class="dy_N">N</div> -
</div>
</div>
woniuke 2007-07-21
  • 打赏
  • 举报
 回复
TO: ldy9929()
加入，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
后，span 的宽度显示就不是 24px 了


robake 2007-07-21
  • 打赏
  • 举报
 回复
哈哈
ldy9929 2007-07-21
  • 打赏
  • 举报
 回复
楼上的真不够意思，都2个钻石了还来抢分，这种小项目就留给我我们这些穷人来做吧
孟子E章 2007-07-21
  • 打赏
  • 举报
 回复
style="display:inline"
飘零雾雨 2007-07-21
  • 打赏
  • 举报
 回复
没明白你的具体需求
飘零雾雨 2007-07-21
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
html,body {
margin:0;
font-size:12px;
text-align:center;
}
div {
overflow:hidden;
}
.dymid {
border:1px solid #0f0;
margin:0 auto;
}
.dy_main {
width:100px;
line-height:200%;
border:1px solid #00f;
margin:0 auto;
}
.dy_1 {
padding:4px 10px;
color:#f00;
border:1px solid #000;
display:inline;
}
</style>
</head>
<body>
<div class="dymid">
<div class="dy_main">
<div class="dy_1">1</div>
<div class="dy_1">2</div>
</div>
</div>
</body>
</html>
ldy9929 2007-07-21
  • 打赏
  • 举报
 回复
测试通过，给分吧
ldy9929 2007-07-21
  • 打赏
  • 举报
 回复
<div style="border:1px solid #00FF00;width:100%;height:26px;text-align:Center;">
<div id="div2" style="border:1px solid #0000FF; width:1; white-space:nowrap; text-align:center" >
<span style="color:Red;border: 1px solid #000000;height:24px;width:24px;text-align:center;"> 1 </span>
<span style="color:Red;border: 1px solid #000000;height:24px;width:24px;text-align:center;"> 2 </span>
</div>
</div>
ldy9929 2007-07-21
  • 打赏
  • 举报
 回复
试过用<table>了吗？
div垂直居中-CSS元素垂直居中方法的探究
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
多个div并排居中显示
需要多个div并排居中显示，这里我将两个方法 1. 使用flex HTML <div class="div0"> <div class="div1">asdasd</div> <div class="div2">asdasd</div> </div> CSS .div0 { ...
html div 同行居中,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中，画面经常有多个DIV的内容显示在一行的要求。比如HTML你好，这是div1的第一行。你好，这是div1的第二行你好，这是div2的第一行。你好，这是div3的第一行。你好，这是div3的第二行怎么居中显示在一行呢...
html div 同行居中,多个div显示同一行并居中显示(代码附带jquery-hover事件)
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,...Document这里是主题-One这里是主题-Two这是div1的内容这是div2的内容.div_allinline {text-align: center;margin: 0 auto...
css 两个div一行居中显示,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中，画面经常有多个DIV的内容显示在一行的要求。比如HTML你好，这是div1的第一行。你好，这是div1的第二行你好，这是div2的第一行。你好，这是div3的第一行。你好，这是div3的第二行怎么居中显示在一行呢...
CSS

61,112

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章