CSS hell, I just want a box with min sizes and 1 pixel gap -


please achieve css: have array of text strings, 1 char 200 chars. need display them in webpage each in separate box.

  • the box flow similar text, left right until end of page wrap
  • the background color of each box must cyan.
  • minimal width , height must both 50 pixels
  • 1-2 pixel space between boxes (maybe achieve margin=1)
  • there must @ least 2 pixels between text , edge of box
  • text vertically aligned middle
  • text horizontally aligned center
  • maximum width of box must 300 px
  • if text not fit in 50x300 cropped inside box (box not grow)
  • each box should have 1 pixel black border

this must simple experienced! try every possible css tag; wrong. read css boxing, surprisingly made more compilcated.

<style> z {     min-width: 50;     #min-height: 50;     padding: 1px;     padding-color: magenta;     margin: 1px;     margin-color: red;     #padding-left: 10px;     display: table-cell;     #height: 50;     #vertical-align: middle;     #text-align:center;     background-color: cyan;     #border: 1px;     #border-color:green;     /* padding:10px 10px 10px 10px; */     border-top:1px solid     border-style:solid;     border-color:#ff0000 #0000ff;     outline-style:dotted;     outline-color:#00ff00;     outline-width: 1px;     color: blue; } </style>  <html>     <z>1</z>     <z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z> </html>

i pasting can see how hard , wrong try.

i not sure if understand requirements mixture of float:left elements display:table-cell give text wraps when gets end of page allows both vertical , horizontal center aligning

html:

<div><span>test</span></div> <div><span>test 1</span></div> <div><span>loads of text wraps if text goes on 300px in length</span></div> <div><span>loads of text wraps if text goes on 300px in length , hide content if really long</span></div> <div><span>a</span></div> <div><span>amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>

css:

div  {     border:1px solid #000000;      background-color:cyan;     float:left;     margin:1px 1px 0 0;      box-sizing:border-box;     height:50px;     max-width:300px;     overflow:hidden; }  div > span  {     display:table-cell;     min-width:50px;     max-width:300px;     height:50px;     padding:2px;     text-align:center;     word-wrap:break-word;     box-sizing:border-box;     vertical-align:middle; }

http://jsfiddle.net/up6kc/6/


Comments

Post a Comment

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

i have android application, want convert blackberry 10 , google map needed in app,but blackberry 10 not support googlemap , blackberry developer web site supply way replace it.the sample below: @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); webview webview = (webview) findviewbyid(r.id.mywebview); webview.getsettings().setjavascriptenabled(true); webview.loadurl("http://maps.google.com/?ll=36.97, -122&lci=bike&z=13&t=p"); } i cannot understand it,i not know how add multiple markers on googlemap via url? can me? this worked me map shown in webview.
Read more

php - guestbook returning database data to flash -

i've been struggling problem long , unable make work, hope can me it. first, know php files correct , mysql database works fine. in flash, able submit comment database comments not display. did many tests such making returned_database flash separately , worked fine - can see old comments. long combine submitting 1 , returning 1 together, flash doesn't show comments more. put lower version flash effects on frame thinking doesn't collaborate returning flash, submitting flash works fine. since pretty complex problem hard me copy actionscript code because on different frames in flash. if has ideas fixing maybe can send file you?
Read more

delphi - Dynamic file type icon -

i want register file type in windows , make program delphi draw icon of file according contents (something custom icon format). how can this? thanks nortd , user539484 comments, searched internet "shell icon handler delphi" , found sample here , , shell+ components has component this.
Read more