Question

我在下面的JSfiddle链接中有我的代码结构。问题是当我添加浮动时：右边的“添加”文本，它会在“快速链接”和“快速链接”之上产生额外的空间。 “排名前20的网站”部分。

#home-content {
	padding: 5px;
}

#home-content .css-table #row1-col3 .col-body {
	padding: 5px 5px;
    /* border: 1px solid #000; */
}

/* Home page Quick Links column */
#home-content .css-table #row1-col1 .col-body > div {
    max-height: 232px;
    overflow: auto;
}

/* Home page MyShortcuts column */
#home-content .css-table #row1-col3 .col-body > div {
    max-height: 215px;
    overflow: auto;
}

.css-table {
	display: table;
	border-spacing: 9px 5px;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

.css-table #row1-col1 {
	display: table-cell;
	width: 170px;
	border: 1px solid #cccccc;
	background-color: White;
}

.css-table #row1-col2 {
	display: table-cell;
	width: 540px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row1-col3 {
	display: table-cell;
	width: 255px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2 {
	display: table-cell;
	width: 906px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2-col1 {
	display: table-cell;
	width: 490px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2-col2 {
	display: table-cell;
	width: 490px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.col-header {
	border-bottom: 1px dotted #cccccc;
	position: relative;
	height: 24px;
	padding: 7px 7px 1px 7px;
	font-family: verdana;
	font-size: 13px;
	background-color:#cccccc;
}

.col-body {
	padding: 0px 0px 0px 0px;
	border-spacing: 1px 1px;
  font-family: verdana;
	font-size:12px;
}

.col-newsfeeds {
	padding: 5px 5px 5px 5px;
	border-spacing: 1px 1px;
}

<div id="home-content">
  <div class="css-table">
	  <div id="row1-col1">
		  <div class="col-header">
			  Quick Links
			</div>
			<div class="col-body">
        Test 1
			</div>
		</div>
		<div id="row1-col2">
  		<div class="col-header">
				Top 20 Sites
			</div>
			<div class="col-body">
        Test 2
			</div>
		</div>
		<div id="row1-col3">
		  <div class="col-header">
			  <div style="float:left;">My Shortcuts</div>
				<div style="float:right;">Add</div>
			</div>
			<div class="col-body">
			  Item 1<br/>
			  Item 2<br/>
			  Item 3<br/>
			  Item 4<br/>
			  Item 5<br/>
			  Item 6<br/>
			  Item 7<br/>
			  Item 8<br/>
			  Item 9<br/>
			  Item 10<br/>        
			</div>
		</div>
	</div>
	<div class="css-table">
		<div id="row2-col1">
			<div class="col-header">
				In the News
			</div>
			<div class="col-body">
			  Test 3
      </div>
		</div>
		<div id="row2-col2">
			<div class="col-header">
				Announcements
			</div>
			<div class="col-body">
		    Test 4
			</div>
		</div>
	</div>
</div>

如何将“我的快捷方式”文本右侧的“添加”文本浮动而不会影响其他文本？

谢谢。

Answer 1

将“我的快捷方式”标题设置为内嵌块而不是左侧浮动

#home-content {
	padding: 5px;
}

#home-content .css-table #row1-col3 .col-body {
	padding: 5px 5px;
    /* border: 1px solid #000; */
}

/* Home page Quick Links column */
#home-content .css-table #row1-col1 .col-body > div {
    max-height: 232px;
    overflow: auto;
}

/* Home page MyShortcuts column */
#home-content .css-table #row1-col3 .col-body > div {
    max-height: 215px;
    overflow: auto;
}

.css-table {
	display: table;
	border-spacing: 9px 5px;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

.css-table #row1-col1 {
	display: table-cell;
	width: 170px;
	border: 1px solid #cccccc;
	background-color: White;
}

.css-table #row1-col2 {
	display: table-cell;
	width: 540px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row1-col3 {
	display: table-cell;
	width: 255px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2 {
	display: table-cell;
	width: 906px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2-col1 {
	display: table-cell;
	width: 490px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.css-table #row2-col2 {
	display: table-cell;
	width: 490px;
	border: 1px solid #cccccc;
	padding: 0;
	background-color: White;
}

.col-header {
	border-bottom: 1px dotted #cccccc;
	position: relative;
	height: 24px;
	padding: 7px 7px 1px 7px;
	font-family: verdana;
	font-size: 13px;
	background-color:#cccccc;
}

.col-body {
	padding: 0px 0px 0px 0px;
	border-spacing: 1px 1px;
  font-family: verdana;
	font-size:12px;
}

.col-newsfeeds {
	padding: 5px 5px 5px 5px;
	border-spacing: 1px 1px;
}

<div id="home-content">
  <div class="css-table">
	  <div id="row1-col1">
		  <div class="col-header">
			  Quick Links
			</div>
			<div class="col-body">
        Test 1
			</div>
		</div>
		<div id="row1-col2">
  		<div class="col-header">
				Top 20 Sites
			</div>
			<div class="col-body">
        Test 2
			</div>
		</div>
		<div id="row1-col3">
		  <div class="col-header">
			  <div style="display:inline-block">My Shortcuts</div>
				<div style="float:right;">Add</div>
			</div>
			<div class="col-body">
			  Item 1<br/>
			  Item 2<br/>
			  Item 3<br/>
			  Item 4<br/>
			  Item 5<br/>
			  Item 6<br/>
			  Item 7<br/>
			  Item 8<br/>
			  Item 9<br/>
			  Item 10<br/>        
			</div>
		</div>
	</div>
	<div class="css-table">
		<div id="row2-col1">
			<div class="col-header">
				In the News
			</div>
			<div class="col-body">
			  Test 3
      </div>
		</div>
		<div id="row2-col2">
			<div class="col-header">
				Announcements
			</div>
			<div class="col-body">
		    Test 4
			</div>
		</div>
	</div>
</div>

向右浮动div会导致不良结果

1 个答案: