width của <div> tự động co dãn theo nội dung?

[websharepoint]

Mình có 1 vấn về cần hỏi các pro, mong chỉ giáo!
Mình có 1 <div> chứa text..

<div>text text .. </div>

Mình muốn khi
+ Trong <div> có text thì width = 100px;
+ Trong <div> không có text thì width = 0px;

Mình không biết phải làm sao?
Help me!

[trungtd_vtic]

Hình như là width:auto;

[phongjalvn]

height thì dễ, width thì hơi khó, tùy theo ứng dụng sẽ có phương pháp khác nhau.
Nếu div đó của bạn chứa trong 1 div khác thì bạn không cần làm gì, nếu không có content nó sẽ tự động có height = 0, và không hiện ra ( trừ 1 số trường hợp)
Nếu bạn dùng cho các cột left-right. VD nếu bạn muốn cột left khi không có cotennt sẽ tự động mất thì ... hơi bị khó đó :D
Giải pháp khả thi nhất cho vấn đề đó là ... java. Hoặc bạn sẽ phải làm thêm 1 layout để disable column đó đi :D

[Spirit]

Bạn dùng thêm 1 cái phụ nào đó cho text, dùng span chẳng hạn.

<div class="main">
<span> sh1t qua de </span>
</div>

.main {
}
.main span {
width: 100px;
}

[phongjalvn]

Bạn dùng thêm 1 cái phụ nào đó cho text, dùng span chẳng hạn.

<div class="main">
<span> sh1t qua de </span>
</div>

.main {
}
.main span {
width: 100px;
}

Cách này được á, nhưng thử trong trường hợp 2 em nói chưa bác ?
Nếu giải quyết trên 1 div đơn giản vậy thì không thành vấn đề, cái vấn đề nó nằm ở trường hợp 2 kìa
Còn trường hợp 1 đặt div hoặc span lồng trong 1 cái div thì không có gì phải nói hết :D
Ví dụ vầy đi: em có cái layout 3 cột, bác viết thử sao cho khi không có content thì cột right hoặc left có width = 0 đi, cái này em nghiên cứu chưa thông, mong học hỏi :D

[websharepoint]

Pác phongjalvn hiểu đúng ý em rồi! ý em muốn làm vậy á..
Em định làm giống như mấy bài báo vậy:

Em có 1 box chứa hình và phần mô tả cho hình ở bên dưới hình.. cái này float: left như sau:
<div> //float:left
<div>Hinh</div> //img có width = "100px"
<div>Mo ta cho hinh</div> //div này có width = "100px"
</div>
Em muốn:
Khi bài báo của em có hình thì cái box này có width = "100px"
Khi nó không có hình thì nội dung nó tràn ra ngoài luôn...

Khổ nổi trên ie7 em không thấy lỗi.. nhưng ie6 và FF thì rất xấu..

Rất mong mọi người hãy chia sẽ sáng kiến..

[phongjalvn]

Hà hà, nếu bạn làm hình thì ok, đơn giản thôi
Bạn không cần đặt hình đó vào 1 div cũng được :D
Bạn có thể check thử example tại http://phuongvy.vn/vcms/html/ (Mình thiết kế, nhưng sau khi đưa qua lồng code thì ... =.=", hơi chuối)

Cái hình bạn gán float:left vào thôi :D



<div class="news-list">
<div class="bullet">02</div>
<div class="news clearfix">
<h1>The new album has found</h1>
<span class="author">Submitted by <a href="#">*admin</a></span>
<img src="images/image.png" alt="image" class="img-left"/>
<p>Libris splendide pri et, vix in ullum propriae, duo eu elitr causae definiebas. Sensibus temporibus vim ei, eu invenire deseruisse pro. Per etiam consulatu ne, vivendo corrumpit est et. Ius wisi graeco cu.<br />
<br />Qui omnes ignota in, ut autem concludaturque pri, his an decore omittam. Per admodum platonem in. Eos te ancillae prodesset, eu minim vitae suscipiantur eos. Eum ad clita melius doctus, soleat ignota ut eos. <a href="#" class="readmore">Read More</a></p>
<div class="bar"> <a href="#" class="print">print</a><a href="#" class="comment">comment (25)</a><a href="#" class="more">read more</a> </div>
</div>
</div>



.news-list{
margin-top:10px;
position:relative;
}
.news-list .bullet{
position:absolute;
left:29px;
top:22px;
background:url(../images/bullet.png) top left no-repeat;
width:45px;
height:45px;
font-size:185%;
color:#fff;
text-align:center;
padding-top:9px;
font-family:Arial, Helvetica, sans-serif;
}
.news-list .news{
margin:0 0 10px 80px;
padding-top:20px;
border-bottom:1px solid #ccc;
}
.news-list .nobl{
border-bottom:none;
}
.news-list .news h1 {
padding:10px 0 0;
font-size:20px;
}
.news-list .news .author{
font-style:italic;
color:#7b7b7b;
font-size:85%;
}
.news-list .news .author a{
font-weight:bold;
color:#e2255f;
font-style:normal;
}
.news-list .news p{
line-height:1.45em;
padding-top:15px;
}
.news-list .news a.readmore {
color:#e2255f;
font-style:italic;
}
.news-list .news .bar {
padding-bottom:15px;
}
.news-list .news .bar .print{
color:#000;
background:url(../images/icons-print.png) left 2px no-repeat;
padding-left:22px;
font-weight:bold;
margin-right:10px;
padding-bottom:3px;
}
.news-list .news .bar .comment{
color:#e2255f;
background:url(../images/icons-comment.png) left 1px no-repeat;
padding-left:22px;
padding-bottom:3px;
font-weight:bold;
margin-right:10px;
}
.news-list .news .bar .more{
color:#000;
background:url(../images/icons-readmore.png) left 1px no-repeat;
padding-left:22px;
font-weight:bold;
margin-right:10px;
padding-bottom:3px;
}

Đây là code viết cho trang đó, bạn có thể tham khảo thử :D. Dư hơi nhiều, nhưng ... :D lười viết example quá, copy qua luôn :P
Nếu không có hình thì cái content nó tràn qua thôi :D

[2_lua_IT]

@Websharepoint : Pác thử dùng code này thử xem, chỉ áp dụng cho image thôi).
<div style="width:400px; overflow:hidden;">
<p style="float:left; width:auto; height:auto; line-height:1%; margin-right:10px;"><img src="http://www.ddth.com/image.php?u=183705&dateline=1204384135" width="90" height="90" /></p>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>

[websharepoint]

Thanks các pác đã tận tình! :-)

Nhưng vấn đề của mình không phải ở chổ cái hình mà chính là ở chổ cái phần "MÔ TẢ CHO HÌNH".... nó thật sự rắc rối..

Hix... biết làm sao đây bạn mình ơi..???...

[phongjalvn]

Trong trường hợp này tốt nhất bạn up thử lên 1 chỗ nào đó, thì mình dễ test và code cho bạn hơn

[2_lua_IT]

Nếu một khối nội dung thì bạn nên định nghĩa class khác, để dzô. CSS làm j có thể thông minh tự nhận biết ý của bạn. Nếu CSS có hiểu thì các anh em cùng mẹ khác cha (browser) cũng chẳng thèm hiểu cho bạn, tụi nó chứa đầy những mâu thuẫn.

[haductrung]

Các pro chỉ đến thế mà còn hông hông chịu thì chỉ có nước bạn úp một bản demo lên anh em giải quyết cho bạn chứ biết làm sao bi giờ???

[websharepoint]

Thanks các pro nhiều!

Mình đã hiểu ra vấn đề rồi. chỉ còn mỗi 1 cách là tìm giải pháp khác thôi..

css vẫn chỉ là css ...

[darkera13]

trường hợp muốn thế thì áp dụng css cho cái img là xong có gì đâu mà phải thắc mắc nhiều.

Bài viết không có hình thì không show thẻ <img /> và description của ảnh ra (server script làm) -> Phần description của bài viết sẽ tự động full.

Bài viết có hình thì show thẻ <img /> và description ra và thêm style="float:left; height:90px; width:90px;" vào thẻ <img /> là xong. Phần description của bài viết sẽ ở bên phải của ảnh.

[{cssyeah:com}]

Chào các anh em,
Để trả lời câu hỏi của websharepoint mình có một số ngu ý như sau:

Thứ nhất: CSS sẽ không tự hiểu được tính auto của layout, khi nào có cột trái, khi nào không có mà muốn xử lý điều đó thì chúng ta cần phải sử dụng server code hoặc javascript.

Thứ hai: Để giải quyết vấn đề trên nếu dùng server code hoặc javascript mà không muốn thay đổi layout của website thì chúng ta có thể dùng surfix cho layout(vd: -fl -> Float left, -fr -> Float right,...)

[websharepoint]

(vd: -fl -> Float left, -fr -> Float right,...) ???????

là sao hả bạn?? mình thật sự không hiểu??

Rất mong được chỉ giáo thêm..

[vtnphong]

CSS chỉ là để trình bày thôi, nếu bạn muốn sử dụng điều kiện if cho việc có nội dung hay ko thì tốt nhất là kết hợp với php đi.

[2_lua_IT]

Làm như cách pác vtnphong đi, còn CSS thì chịu thua. Đề tài đặt ra là kô khả thi cho CSS.

[cuongvq]

Cách của bác cssyeah là khả thi nhất. Cụ thể là mình làm 2 loại layout cho phần này.
Cái thứ 1 đặt ở chế độ khi có hình, khi đó div chứa phần text sẽ có kích thước width: 60px chẳng hạn.
Cái thứ 2 đặt ở chế độ khi không có hình, khi đó div chứa phần text sẽ có kích thước width 100px.
Lưu ý là gán class cho 2 cái div này và khi nào dùng trường hợp nào thì sẽ load cái div đó ra.

Đơn giản hơn thì bạn tạo 1 div có widthL: 100px. Cái ảnh nằm trong div đấy sẽ có thuộc tính:

#abc {
width: 100px;
}

#abc img {
float: left;
padding-right: 5px;
}

Kết quả là khi có ảnh thì phần text lùi vào nhường chỗ cho ảnh nằm bên trái. Còn không có ảnh thì text tràn ra hết div (rộng 100px)
Trong đó padding-right: 5px sẽ làm cho phần chữ bên phải bị đẩy ra cách mép ảnh 5px cho khỏi bị dính vào nhau (xấu).

Bạn có thể tham khảo một số bài viết trong blog của mình để sử lý cho các trường hợp cần can thiệp CSS

[2_lua_IT]

Cách của bác cssyeah là khả thi nhất. Cụ thể là mình làm 2 loại layout cho phần này.
Cái thứ 1 đặt ở chế độ khi có hình, khi đó div chứa phần text sẽ có kích thước width: 60px chẳng hạn.
Cái thứ 2 đặt ở chế độ khi không có hình, khi đó div chứa phần text sẽ có kích thước width 100px.
Lưu ý là gán class cho 2 cái div này và khi nào dùng trường hợp nào thì sẽ load cái div đó ra.

Đơn giản hơn thì bạn tạo 1 div có widthL: 100px. Cái ảnh nằm trong div đấy sẽ có thuộc tính:

#abc {
width: 100px;
}

#abc img {
float: left;
padding-right: 5px;
}

Kết quả là khi có ảnh thì phần text lùi vào nhường chỗ cho ảnh nằm bên trái. Còn không có ảnh thì text tràn ra hết div (rộng 100px)
Trong đó padding-right: 5px sẽ làm cho phần chữ bên phải bị đẩy ra cách mép ảnh 5px cho khỏi bị dính vào nhau (xấu).

Bạn có thể tham khảo một số bài viết trong blog của mình để sử lý cho các trường hợp cần can thiệp CSS

Trời, code chỉ có 1 cột hình ảnh và 1 text thì tui đã nói ở trên rồi. Pác cũng nên xem lại code CSS của mình, img padding-right:5px; nghĩa là pác đẩy cái img thêm 5px đó, kô đúng thực chất của nó. Đang nói về 2-3 cột dữ liệu(có cả hình và text) mà.

[trouble_maker]

dùng nó kết hợp với code cũng đc chứ nhỉ. dễ xử lý cho mình hơn, đỡ cần bị khai báo nhiều trong css. chỗ cần làm như thế thì cứ dùng thêm thuộc tính style ="khai báo chiều dài" trong cái div nó, rồi if, else gì gì đó thì đơn giản hơn :D hhihi

[darkera13]

Cuối cùng là cái ông nào hỏi cái này là bựa nhất, câu hỏi không rõ ràng. Muốn làm 1 đằng nhưng lại hỏi 1 nẻo, cụ thể là ông ý hỏi về cái giải pháp ông ý nghĩ ra để giải quyết vấn đề đáng lẽ được hỏi thay vì hỏi thẳng vấn đề cần giải quyết.

Hỏi kiểu này chào thua liền.

[2_lua_IT]

hehe, túm lại là chủ nhân của bài toán này tự check lại đề bài thôi, thay đổi đề bài liên tục thì ai mà lần ra được. Tôi nghĩ các giải pháp đều có hết rồi, áp dụng cho từng trường hợp cụ thể của pác đi.