【请教】超简单div+css布局请教，不管高手低手都来瞧瞧

天字第一号

1. <div class="name">Item Name 1</div>
   
2. <div class="description">Blah Blah Blah...</div>
   
3. <div class="price">$100.00</div>
   
4. 
   
5. <div class="name">Item Name 2</div>
   
6. <div class="description">Blah Blah Blah...</div>
   
7. <div class="price">$100.00</div>
   
8. 
   
9. <div class="name">Item Name 3</div>
   
10. <div class="description">Blah Blah Blah...</div>
    
11. <div class="price">$100.00</div>
    
12. 
    
13. ...
    

复制代码

要实现的布局：

Item Name 1
Blah Blah Blah...                        $100.00
Item Name 2
Blah Blah Blah...                        $100.00
Item Name 3
Blah Blah Blah...                        $100.00
...

楼主木有学过css，在此向各位高手低手

天字第一号

分分伺候

blurfun

HTML改成这样。
把价格$100.00 放在一个INLINE元素里，这样就可以和“Blah Blah Blah”放一行。
<i>表示的斜体字，你不要斜体，所以加个font-style:normal就可以。

1. <div class="name">Item Name 1</div>
   
2. <div class="description">Blah Blah Blah... <i>$100.00 </i></div>
   
3. 
   
4. 
   
5. <div class="name">Item Name 2</div>
   
6. <div class="description">Blah Blah Blah... <i>$100.00 </i></div>
   
7. 
   
8. <div class="name">Item Name 3</div>
   
9. <div class="description">Blah Blah Blah... <i>$100.00 </i></div>

复制代码

CSS一句就可以

1. .description i {padding-left:50px; font-style:normal;}

复制代码

zaiyiqi0604

不知道楼主具体的用途。但是看起来至少应该是想要那些价格能在垂直对齐的。要不看起来不方便也失去意义了。

用最简单的这种布局  要是有一个产品名字。长度不一样。就会造成。后面价格无法对齐。。

要是楼主有更详细的要求。也许大家会有更详细的帮助。。

一点拙见。。不知是否有帮助。

天字第一号

zaiyiqi0604 发表于 2014-1-26 22:07
不知道楼主具体的用途。但是看起来至少应该是想要那些价格能在垂直对齐的。要不看起来不方便也失去意义了。 ...

感谢建议。
想要的效果类似table那样
一列是description，一列是价格，要对齐的。

razgriz

其实你HTML的结构根本不用动，用CSS能实现一切。
因为你要有个对齐的效果，所以得给description部分设定一个固定的width，然后用inline-block可以将div这种块元素排在同一个行。CSS如下：
.description { width: 300px; height: auto; display: inline-block; margin-right: 30px; }
.price { display: inline-block; }
不过inline-block在IE7上不工作，要兼容IE的话，最好把display: inline-block写成：
display: inline-block;
*display: inline;
zoom: 1;

thecatinthehat

zaiyiqi0604

天字第一号 发表于 2014-1-26 23:33
感谢建议。
想要的效果类似table那样
一列是description，一列是价格，要对齐的。 ...

不太了解楼主有多少产品，不知道是否可以用TABLE。

有2个例子给楼主参考一下。

https://wrapbootstrap.com/tag/pricing-table （现在的流行设计,适合产品不多）

http://css-tricks.com/responsive-data-tables/ (楼主的DIV 就是在模拟一个table.不知是否可以直接用TABLE)

因为现在都是responsive 了。所以很多都不用固定的width而是用百分比。

也许楼主的要求根本不需要做到这些。。希望是抛砖引玉。。

fuleinist

Dynamic Width

1. div.name {
   
2. clear:both;
   
3. }
   
4. div.description{
   
5. float:left;
   
6. }
   
7. div.price {
   
8. float:right;
   
9. }

复制代码

eguan88

我用table 写  

天字第一号

zaiyiqi0604 发表于 2014-1-27 08:26
不太了解楼主有多少产品，不知道是否可以用TABLE。

有2个例子给楼主参考一下。

感谢感谢。但楼主是门外汉~~~太复杂了搞不定

天字第一号

fuleinist 发表于 2014-1-27 09:59
Dynamic Width

分分先欠着~~~
我自己google的方法和这个类似，呵呵，基本解决了。