Question

这是我的代码：

＆＃13;

#container {
	border:1px solid #ccc;
	width: 650px;
	margin: 0 auto;
}
#left {
	float: left;
	border: 1px solid red;
        height: inherit;
}
#left img {
	width: 200px;
}
#right {
	border-color: #ccc;
	overflow: hidden;
	padding: 15px;
}

＆＃13;

<div id="container">
	<div id="left">
	  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEYXFYtEKaqcM2_n4o1ppeWTJhzXjhIaooK76ArmSOkl_r1oE2nQCB-12J">
	</div>
	<div id="right">
			HTML provides tags for three different types of lists: unordered ordered  and definition
			Unordered lists are normally displayed as a series of bullet points; ordered lists are numbered; and definition lists
			are presented as a word or phrase followed by its definition, indented on the following line. Figure 10-1 shows
			examples of all three (the code is in lists.html in the ch10 folder).
			CSS regards the components of definition lists as block-level elements, so it has no special properties to
			deal with them. You style definition lists with text properties, padding, margins, borders, and backgrounds as
			required. Unordered and ordered lists use the same properties, but CSS provides extra ones to control the bullets
			or numbers alongside each list item.
			Using these extra properties in combination with the display property, it’s easy to convert an unordered
			list into a navigation menu, as you’ll learn how to do later in this chapter. Many designers now regard this as
			the preferred way to build navigation for their sites. This isn’t simply a design trick. Even without any styling, a
			bulleted list is a logical and visually acceptable way of presenting a series of links to other parts of a website.
			A series of nested lists provides a structured outline of a website’s hierarchy, with the top level indicating the site’s
			main sections, and the nested lists acting as submenus.
	</div>
</div>

＆＃13;

高度#right没有固定，它可能有变化。我可以把图像高度等于高度右div，我不想display:flex因为不支持IE8-IE9？

Answer 1

试用此代码

使用display:table-cell

#container {
	border:1px solid #ccc;
	width: 650px;
	margin: 0 auto;
    display: table;
}
#left {
    border: 1px solid red;
    height: inherit;
    display: table-cell;
    vertical-align: top;
}
#left img {
	width: 200px;
}
#right {
    border-color: #ccc;
    overflow: hidden;
    padding: 15px;
    display: table-cell;
    vertical-align: top;
}

<div id="container">
	<div id="left">
	  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEYXFYtEKaqcM2_n4o1ppeWTJhzXjhIaooK76ArmSOkl_r1oE2nQCB-12J">
	</div>
	<div id="right">
			HTML provides tags for three different types of lists: unordered ordered  and definition
			Unordered lists are normally displayed as a series of bullet points; ordered lists are numbered; and definition lists
			are presented as a word or phrase followed by its definition, indented on the following line. Figure 10-1 shows
			examples of all three (the code is in lists.html in the ch10 folder).
			CSS regards the components of definition lists as block-level elements, so it has no special properties to
			deal with them. You style definition lists with text properties, padding, margins, borders, and backgrounds as
			required. Unordered and ordered lists use the same properties, but CSS provides extra ones to control the bullets
			or numbers alongside each list item.
			Using these extra properties in combination with the display property, it’s easy to convert an unordered
			list into a navigation menu, as you’ll learn how to do later in this chapter. Many designers now regard this as
			the preferred way to build navigation for their sites. This isn’t simply a design trick. Even without any styling, a
			bulleted list is a logical and visually acceptable way of presenting a series of links to other parts of a website.
			A series of nested lists provides a structured outline of a website’s hierarchy, with the top level indicating the site’s
			main sections, and the nested lists acting as submenus.
	</div>
</div>

Answer 2

	#container {
	border:1px solid #ccc;
	width: 650px;
	margin: 0 auto; position: relative;
}
#left {
float: left;
    border: 1px solid red;
    height: 100%;
    position: absolute;
    top: 0; width: 200px;
}
#left img {
	max-width: 100%;
}
#right {
	border-color: #ccc;
	overflow: hidden;
	padding: 15px; margin-left: 200px;
}

<div id="container">
	<div id="left">
	  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEYXFYtEKaqcM2_n4o1ppeWTJhzXjhIaooK76ArmSOkl_r1oE2nQCB-12J">
	</div>
	<div id="right">
			HTML provides tags for three different types of lists: unordered ordered  and definition
			Unordered lists are normally displayed as a series of bullet points; ordered lists are numbered; and definition lists
			are presented as a word or phrase followed by its definition, indented on the following line. Figure 10-1 shows
			examples of all three (the code is in lists.html in the ch10 folder).
			CSS regards the components of definition lists as block-level elements, so it has no special properties to
			deal with them. You style definition lists with text properties, padding, margins, borders, and backgrounds as
			required. Unordered and ordered lists use the same properties, but CSS provides extra ones to control the bullets
			or numbers alongside each list item.
			Using these extra properties in combination with the display property, it’s easy to convert an unordered
			list into a navigation menu, as you’ll learn how to do later in this chapter. Many designers now regard this as
	
	</div>
</div>

试试这个

Answer 3

你可以试试这个

#left{
      height: 125px;
}
#right{
  height: 125px;
    overflow-y: auto;
}

Answer 4

＆＃13;

#container {
	border:1px solid #ccc;
	width: 650px;
	margin: 0 auto;
    height: 580px;//added new code 
}
#left {
	float: left;
	border: 1px solid red;
        height:580px;
}
#left img {
	width: 200px;
}
#right {
	border-color: #ccc;
	overflow: hidden;
	padding: 15px;
}

＆＃13;

<div id="container">
	<div id="left">
	  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEYXFYtEKaqcM2_n4o1ppeWTJhzXjhIaooK76ArmSOkl_r1oE2nQCB-12J">
	</div>
	<div id="right">
			HTML provides tags for three different types of lists: unordered ordered  and definition
			Unordered lists are normally displayed as a series of bullet points; ordered lists are numbered; and definition lists
			are presented as a word or phrase followed by its definition, indented on the following line. Figure 10-1 shows
			examples of all three (the code is in lists.html in the ch10 folder).
			CSS regards the components of definition lists as block-level elements, so it has no special properties to
			deal with them. You style definition lists with text properties, padding, margins, borders, and backgrounds as
			required. Unordered and ordered lists use the same properties, but CSS provides extra ones to control the bullets
			or numbers alongside each list item.
			Using these extra properties in combination with the display property, it’s easy to convert an unordered
			list into a navigation menu, as you’ll learn how to do later in this chapter. Many designers now regard this as
			the preferred way to build navigation for their sites. This isn’t simply a design trick. Even without any styling, a
			bulleted list is a logical and visually acceptable way of presenting a series of links to other parts of a website.
			A series of nested lists provides a structured outline of a website’s hierarchy, with the top level indicating the site’s
			main sections, and the nested lists acting as submenus.
	</div>
</div>

＆＃13;

怎么有2个高度相同的div？

4 个答案: