Question

在主页面中，我有两列，一列是菜单（左侧），另一列是标签中的数据。

在左栏中，我希望有一个欢迎＆＃34;消息，个人资料图片和一些文本菜单。我希望左列中的项目垂直对齐。

应该喜欢这个

欢迎辞图片文字菜单1 文字菜单2 ......

但正如你可以在我的html和css代码中那样，

文本菜单（推荐请求）显示在标签上方，即使在声明的html中也是如此。如何在标签下方显示我的文本菜单？

＆＃13;

.main{
	background: #8CA3C6;
  	border: 1px solid #42464b;
  	border-radius: 6px;
  	height: 700px;
 	margin: 5em auto 0;
  	width: 980px;
  	padding: 20px;
}

.title {
	background: #003380;

}

.title h1 {
	font-family: arial;
	font-size: 20px;
	padding: 5px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
}

.row {
	display: inline;
	padding: 0;
	margin: 0;

}

.col {
	float: left;
	width: 20%;
	border: 10px;
	border-color: #000;
	border-width: 1px;
}

.col h1 {
	font-size: 20px;
}

.col ul {
	padding: 0;
	margin: 0;
}

.col li {
	list-style: none;
}


.col1{
	float: left;
	width: 70%;
	border: 10px;
	border-color: #000;
	border-width: 1px;
}

.col2 {
	font-size: 1em;
	text-align: center;
	color:#fff;
	padding:1em 0;
	float: left;
	margin: 0px 10px 0px 10px;
	font-weight: bold;
	text-align: right;
}

.image {
	border-width: 2px;
	border-style: dotted;
	margin: 1px;
	padding: 0;
	width: 100px;
	height: 100px;
	vertical-align: middle;
	position: absolute;
}

.row2{
	float: none;
	display: block;
}

.menu {
	margin: 0;
	padding: 0;
	position: relative;
	height: 50px;
	text-align: center;
	float: none;
	display: block;
}

.tabs {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 0px 0 0 0px;
  text-align: left;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs label {
  text-align: center;
  vertical-align: middle;
  display: block;
  padding: 15px 10px;
  border-radius: 2px 2px 0 0;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  background: #4D70A6;
  cursor: pointer;
  position: relative;
  top: 4px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: #19478D;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 20px;
  position: absolute;
  top: 45px;
  left: 0;
  background: #003380;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
  background: #003380;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

p.link {
  clear: both;
  margin: 380px 0 0 15px;
}
p.link a {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #612e76;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
p.link a:hover {
  background-color: #522764;
}

＆＃13;

<div class="main">
	<div class="title"><h1>HOME</h1></div>
	<div class="row">
		<div class="col">
			<h1>Welcome</h1>
			<div>
				<img width="100" height="100" class="image" src="http://icons.iconarchive.com/icons/tristan-edwards/sevenesque/1024/Preview-icon.png">
			</div>
			<div class="row"> 
				<ul>
					<li>
						Recommendation Request
					</li>
				</ul>

			</div>
		</div>
		<div class="col1">

			<ul class="tabs">
			    <li>
			        <input type="radio" name="tabs" id="tab1" checked />
			        <label for="tab1">General Preference</label>
			        <div id="tab-content1" class="tab-content">
			          <p>
			          	test 1
			          	<br/>
			          	a
			          	 	<br/>
			          	a 	<br/>
			          	a 	<br/>
			          	a
			          </p>
			        </div>
			    </li>
			    <li>
			        <input type="radio" name="tabs" id="tab2" />
			        <label for="tab2">Current Preference</label>
			        <div id="tab-content2" class="tab-content">
			          <p>
			          test 2
			          </p>
			        </div>
			    </li>
			     <li>
			        <input type="radio" name="tabs" id="tab3" />
			        <label for="tab3">Current Recommendation</label>
			        <div id="tab-content3" class="tab-content">
			          <p>
			          test 2
			          </p>
			        </div>
			    </li>
			      <li>
			        <input type="radio" name="tabs" id="tab4" />
			        <label for="tab4">Previous Requests</label>
			        <div id="tab-content4" class="tab-content">
			          <p>
			          test 2
			          </p>
			        </div>
			    </li>
			</ul>
		</div>
</div>

＆＃13;

Answer 1

文本＆＃34;建议请求＆＃34;就在＆＃34;欢迎＆＃34;正下方是因为图像绝对定位（position: absolute），这会从文档的normal flow中删除图像。如果从image类中删除该声明，则元素将根据您的预期排列。

如果您确实需要定位图像元素，我建议您将position: relative添加到父容器（.col），然后根据需要绝对定位子元素。

Answer 2

如果您从.image类中删除了position:absolute;＆＃34;建议请求＆＃34;文字将位于图片下方。

.image {
    border-width: 2px;
    border-style: dotted;
    margin: 1px;
    padding: 0;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

http://jsfiddle.net/afLgo4a0/

Answer 3

解决！

我只需要添加

.image img{
vertical-align: middle;

}

到我的CSS代码

为什么元素的显示顺序与HTML源不同？

3 个答案: