Question

我有以下代码

body.about-page ul.about-div {width: 100%; position: relative;float: left; padding: 0 10px; }
body.about-page ul.about-div li {width: 100%; float: left; position: relative; display: block; padding: 8px 25px; border-bottom: 1px #c7c7c7 solid; background-color: #fff;}
body.about-page ul.about-div li img {float: left; position: relative; display: inline-block; }
body.about-page ul.about-div li h3 {display: inline-block; float: left; font-size: 16px; line-height: 26px;  padding-left: 10px;}
body.about-page ul.about-div li.active {padding: 17px 25px; background-color: #fff; border-bottom: 0; }
body.about-page ul.about-div li.active h3 span {font-size: 11px; line-height: 12px; color: #646464; display: block; }

<ul class="about-div">
   <li class="active"><img src="http://oi64.tinypic.com/v7qo8h.jpg" alt="">     
    <h3>User</h3>
    <span>My Profile</span>
   </li>
</ul>

我想要的是，左侧的图像和用户和我的个人资料位于顶部和底部，以便覆盖整个图像。

我希望问题很清楚。这是fiddle。

Answer 1

试试这可能会对你有所帮助

＆＃13;

body.about-page ul.about-div {width: 100%; position: relative;float: left; padding: 0 10px; }
body.about-page ul.about-div li {width: 100%; float: left; position: relative; display: block; padding: 8px 25px; border-bottom: 1px #c7c7c7 solid; background-color: #fff;}
body.about-page ul.about-div li img {float: left; position: relative; display: inline-block; }
body.about-page ul.about-div li h3 {display: inline-block; float: left; font-size: 16px; line-height: 26px;  padding-left: 10px;}
body.about-page ul.about-div li.active {padding: 17px 25px; background-color: #fff; border-bottom: 0; }
body.about-page ul.about-div li.active h3 span {font-size: 11px; line-height: 12px; color: #646464; display: block; }
li{
  display:inline-block;
}
img{
  float:left;
}
h3,span{margin:0 0 0 10px;float:left;}
span{margin-left:38px}

＆＃13;

<ul class="about-div">
<li class="active">
<img src="http://oi64.tinypic.com/v7qo8h.jpg" alt=""><h3>User</h3><br><span>My Profile</span>
</li>
</ul>

＆＃13;

Answer 2

我不明白你究竟想要什么，但这可能会对你有所帮助

＆＃13;

ul.about-div {
  width: 100%; 
  position: relative;
  float: left; 
  padding: 0 10px;
  list-style: none;
}
ul.about-div li {
  width: 100%; 
  float: left; 
  position: relative; 
  display: block; 
  padding: 8px 25px; 
  border-bottom: 1px #c7c7c7 solid; 
  background-color: #fff;
}
ul.about-div li img {
  float: left; 
  position: relative; 
  display: inline-block;
}
ul.about-div li h3 {
  display:block; 
  font-size: 16px; 
  line-height: 18px;  
  padding-left: 35px; 
  margin:0;
}
ul.about-div li.active {
  padding: 17px 25px; 
  background-color: #fff; 
  border-bottom: 0;
}
ul.about-div li.active h3 span {
  font-size: 11px; 
  line-height: 12px;
  color: #646464; 
  display: block; 
}

＆＃13;

<ul class="about-div">
  <li class="active">
    <img src="http://oi64.tinypic.com/v7qo8h.jpg" alt="">
    <h3>User <span>My Profile</span></h3>    
  </li>
</ul>

＆＃13;

css将图像对齐到标题和段落

2 个答案: