有什么办法能让两个div并排不换行，用float的话还是会换行

Even713 2010-12-20 08:03:28
帮我看下这个例子，使用yui的table，运行一下可以看到第一行第一列里图像和文字换行了，我希望的效果是图像和文字能不换行，在一行里。试着把myLongContent变量设为一个短的值如：var myLongContent = "username";他就不换行了。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head>  

    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

<title>Basic Example</title> 

 

<style type="text/css"> 

/*margin and padding on body element

  can introduce errors in determining

  element position and are not recommended;

  we turn them off as a foundation for YUI

  CSS treatments. */

body {

	margin:0;

	padding:0;

}



/*

My css:

*/

.trader-image {

	cursor:pointer;

	margin:5px 4px 5px 5px;

	overflow:hidden;

	float:left;

	vertical-align:middle;

	width:50px;

	height:40px;

}

.trader-content {

	background-color: #CCF;

	float:left;

}

.trader-container {

	border: 1px solid red;

	margin-top:3px;

}

.trader-ticker {

	clear: both;

}

.flag {

	float: left;

}

.username{

	float:left;

	margin-left: 3px;

}



.td-class{

	height:50px;

	border-color:-moz-use-text-color #CBCBCB -moz-use-text-color -moz-use-text-color;

	border-style:none solid none none;

	border-width:medium 1px medium medium;

	margin:0;

	padding:0;

	text-align:left;	

	border-collapse:separate;

	border-spacing:0;	

}

.leaderboard-strategy-trader-container{

	height:100%;

	width:100%;

	border-style:none solid none none;

	text-align:left;	

	border-collapse:separate;

	border-spacing:0;	

}

</style> 

 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" /> 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" /> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script> 

 

 

<!--begin custom header content for this example--> 

<style type="text/css"> 

/* custom styles for this example */

.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 

</style> 

 

<!--end custom header content for this example--> 

 

</head> 

 

<body class="yui-skin-sam"> 

 

 

<h1>Basic Example</h1> 

 

<div class="exampleIntro"> 

	<p>A demonstration of the DataTable's basic feature set.</p> 

			

</div> 

 

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 

 

<div id="basic"></div>



<script type="text/javascript"> 

var myLongContent = "userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "hhhhhhssssssssssrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrname";

YAHOO.util.Event.addListener(window, "load", function() {

    YAHOO.example.Basic = function() {

        var myColumnDefs = [

            {key:"id", sortable:true, resizeable:true},

            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},

            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},

            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},

            {key:"title", sortable:true, resizeable:true}

        ];

 

        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);

        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

        myDataSource.responseSchema = {

            fields: ["id","date","quantity","amount","title"]

        };

 

        var myDataTable = new YAHOO.widget.DataTable("basic",

                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

                

        return {

            oDS: myDataSource,

            oDT: myDataTable

        };

    }();

});



YAHOO.example.Data = {

    bookorders: [

        {id:'<div class="leaderboard-strategy-trader-container"><div class = "trader-image"><img src="http://www.web20share.com/wp-content/themes/webline/images/sina.gif" width="50px" height="40px"></div><div class= "trader-content"><div class = "trader-container"><div class = "flag"><img src="http://www.web20share.com/wp-content/themes/webline/images/ico-rss.gif" height="12px"></div><div class = "username">'+myLongContent+'</div></div><div class = "trader-ticker">ticker</div></div></div>', date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",

        description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},

        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",

        description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},

        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",

        description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},

        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",

        description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}

    ]

};

</script> 

 

<!--END SOURCE CODE FOR EXAMPLE =============================== -->


...全文
1355 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
Even713 2010-12-21
  • 打赏
  • 举报
 回复
cj205说得极是！
llongfeng2008 2010-12-21
  • 打赏
  • 举报
 回复

<html>
<head>
<style>
/*body*/
#container { width:900px; margin:0 auto;}


/*header*/
#header { height:70px; background:#CCFFCC; margin-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}



/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}



/*footer*/
#footer { height:70px; background:#CCFFCC;}

</style>
</head>
<body>

<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
<div id="main">此处显示 id "main" 的内容</div>
<div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
</body>

</html>

用这个试试，DIV布局.希望对你有用
红袖疯子 2010-12-21
  • 打赏
  • 举报
 回复
试一下span吧
hch126163 2010-12-21
  • 打赏
  • 举报
 回复
让两个div并排不换行
只有设置父容器的宽度大于2个div 宽度和


ajccom 2010-12-21
  • 打赏
  • 举报
 回复
userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "h。。。" 太长了，而且浏览器会认为这个字符串是一整个单词，所以不会断字了 LZ试着用中文或者正常的英文单词替换内容
Mr-Jee 2010-12-20
  • 打赏
  • 举报
 回复
样式的问题需要调整。
但是你的问题就在于如果太宽了撑开后导致
td里你的2个div不能并排，而非div的float样式不起作用
Even713 2010-12-20
  • 打赏
  • 举报
 回复
2楼，不能那么宽，能做到自适应么?
原先是有宽度的，比如180px，但是碰到很长的字符串就默默地换行了，所以我想能不能自动撑开div的宽度，而不是换行。能根据内容变宽就好了，也许很难做到这么完美吧？
leelin2010 2010-12-20
  • 打赏
  • 举报
 回复
将第一行第一列的宽度设置去掉。。。。。
Mr-Jee 2010-12-20
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head>  

    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

<title>Basic Example</title> 

 

<style type="text/css"> 

/*margin and padding on body element

  can introduce errors in determining

  element position and are not recommended;

  we turn them off as a foundation for YUI

  CSS treatments. */

body {

    margin:0;

    padding:0;

}



/*

My css:

*/

.trader-image {

    cursor:pointer;

    margin:5px 4px 5px 5px;

    overflow:hidden;

    float:left;

    vertical-align:middle;

    width:50px;

    height:40px;

}

.trader-content {

    background-color: #CCF;

    float:left;

	width:700px;

}

.trader-container {

    border: 1px solid red;

    margin-top:3px;

}

.trader-ticker {

    clear: both;

}

.flag {

    float: left;

}

.username{

    float:left;

    margin-left: 3px;

}



.td-class{

    height:50px;

    border-color:-moz-use-text-color #CBCBCB -moz-use-text-color -moz-use-text-color;

    border-style:none solid none none;

    border-width:medium 1px medium medium;

    margin:0;

    padding:0;

    text-align:left;    

    border-collapse:separate;

    border-spacing:0;    

}

.leaderboard-strategy-trader-container{

    height:100%;

    width:100%;

    border-style:none solid none none;

    text-align:left;    

    border-collapse:separate;

    border-spacing:0;    

}

</style> 

 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" /> 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" /> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script> 

 

 

<!--begin custom header content for this example--> 

<style type="text/css"> 

/* custom styles for this example */

.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 

</style> 

 

<!--end custom header content for this example--> 

 

</head> 

 

<body class="yui-skin-sam"> 

 

 

<h1>Basic Example</h1> 

 

<div class="exampleIntro"> 

    <p>A demonstration of the DataTable's basic feature set.</p> 

            

</div> 

 

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> 

 

<div id="basic"></div>



<script type="text/javascript"> 

var myLongContent = "userrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrrrrrrrsssssddddddddsssssssssssshhhhhhhhhhhhhhhhhhhhhhhhh" + "hhhhhhssssssssssrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr" + "rrrrrrrrrname";

YAHOO.util.Event.addListener(window, "load", function() {

    YAHOO.example.Basic = function() {

        var myColumnDefs = [

            {key:"id", sortable:true, resizeable:true},

            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},

            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},

            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},

            {key:"title", sortable:true, resizeable:true}

        ];

 

        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);

        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

        myDataSource.responseSchema = {

            fields: ["id","date","quantity","amount","title"]

        };

 

        var myDataTable = new YAHOO.widget.DataTable("basic",

                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

                

        return {

            oDS: myDataSource,

            oDT: myDataTable

        };

    }();

});



YAHOO.example.Data = {

    bookorders: [

        {id:'<div class="leaderboard-strategy-trader-container"><div class = "trader-image"><img src="http://www.web20share.com/wp-content/themes/webline/images/sina.gif" width="50px" height="40px"></div><div class= "trader-content"><div class = "trader-container"><div class = "flag"><img src="http://www.web20share.com/wp-content/themes/webline/images/ico-rss.gif" height="12px"></div><div class = "username">'+myLongContent+'</div></div><div class = "trader-ticker">ticker</div></div></div>', date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",

        description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},

        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",

        description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},

        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",

        description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},

        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",

        description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}

    ]

};

</script> 

 

</body></html>
Mr-Jee 2010-12-20
  • 打赏
  • 举报
 回复
设置宽度。
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
div中嵌套html页面,如何在div中嵌套div
请问如何在一个大的div里横向嵌套两个小的div我嵌套的div会换行，没有办法两个并排在一起 因为照着书上做的，所以使Test $(function(){ }); 此处显示 id "rightmain" 的内容 此处显示 id "nav" 的内容 加了float:left,这样就并排了。float:left指都靠左边浮动。一个大的DIV中嵌套两个小的DIV一左一右这是代码.max { width:...
div嵌套
呜呜
如何在一个里放2个以上的
而不换行
标签默认是会换行的，如果在一个里放多个的话，就会换行显示 用了 form{margin:0px;display: inline}的方法，但是IE下无效 方法一： TABLE>   TR>     TD>FORM METHOD=POST ACTION="" style="float:left">         a   
div+css布局之float与clear的用法
div+css布局之float与clear的用法 本文主要讲div+css样式表中的float和clear属性的用法及几个小实例。 CSS Float Layout Basics - CSS浮动布局基础：基于浮动的布局利用了float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个标签上时，浮动就变成了一...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章