{"id":40365,"date":"2012-08-14T21:02:46","date_gmt":"2012-08-14T19:02:46","guid":{"rendered":"https:\/\/nl.wordpress.org\/support\/topic\/css-lijst-opmaken-in-column\/"},"modified":"2016-08-04T23:42:09","modified_gmt":"2016-08-04T23:42:09","slug":"css-lijst-opmaken-in-column","status":"closed","type":"topic","link":"https:\/\/nl.wordpress.org\/support\/topic\/css-lijst-opmaken-in-column\/","title":{"rendered":"CSS lijst opmaken in column."},"content":{"rendered":"

Hallo,<\/p>\n

Ik heb de volgende situatie, op deze pagina: http:\/\/santacatarinabrasil.com\/ staat rechts een lijst met ‘listings’. Dit is een kolomn die automatisch twee rijen wordt. Nu werkt dat opzich goed, maar niet 100%, soms komen ze niet goed naast elkaar te staan omdat de post dan te breed is.<\/p>\n

Dit is de CSS<\/p>\n

#latestlistings {\n\twidth: 480px;\n\tfloat: left;\n\t\/*overflow: hidden;*\/\n}\n\n\t#latestlistings .inner {\n\t\tpadding: 27px 20px 20px 20px;\n\t\toverflow: hidden;\n\t}\n\n\t.latestlisting {\n\t\tmargin-bottom: 20px;\n\t\tmargin-right: 10px;\n\t\tfloat: left;\n\t\tposition: relative;\n}\n\n.latestlisting li {\n\tline-height: 1.5em;\n\tfont-size: 1.1em;\n}\n\n\t.latestlisting ul {\n\t\tmargin-top: 5px;\n\t}\n\n\t.latestlisting li.citystatezip {\n\t\tfont-size: 1.4em;\n\t\tmargin-bottom: 5px;\n\t\tfont-weight: bold;\n\t}\n\n\t.latestlisting li.price {\n\t\tfont-size: 1.4em;\n\t}\n\n\t.latestlisting li.bedsbaths {\n\t\t\/* margin-top: 5px; *\/\n\t}<\/code><\/pre>\n
En dit is de HTML:<\/p>\n
<div id="latestlistings">\n\t\t<div class="inner">\n\n\t\t\t<?php $recent = new WP_Query('post_type=listing&post_status=publish&posts_per_page='.get_option('wp_recentlistingsnumber_home')); ?>\n\n\t\t\t<div style="padding-top: 4px; padding-bottom:15px"><h2><?php echo get_option('wp_heading_recentlistings') ?><\/h2><\/div>\n\n\t\t\t<?php if ($recent->have_posts()) : while ($recent->have_posts()) : $recent->the_post(); ?>\n\t\t\t<?php include 'includes\/variables.php' ?>\n\t\t\t<div class="latestlisting">\n\t\t\t<?php $sliderimages = get_post_meta($post->ID, 'images_value', true);\n\t\t\tif ($sliderimages) {\n\t\t\t\t$arr_sliderimages = explode("\\n", $sliderimages);\n\t\t\t\t} else {\n\t\t\t\t$arr_sliderimages = get_gallery_images();\n\t\t\t\t}\n\n\t\t\t\t$firstimage = $arr_sliderimages[0];\n\t\t\t\t$arr_sliderimages = parse_url($firstimage);\n\n\t\t\t\t\/\/echo $arr_sliderimages[path];\n\n\t\t\t\t$resized = timthumb(100, 200, $arr_sliderimages[path], 1);\n\t\t\t?>\t\n\n\t\t\t<a href="<?php the_permalink(); ?>"><img width="200" height="100" alt="Image for <?php echo $address; ?>" src="<?php echo $resized ?>" \/><\/a>\n\t\t\t<div class="shadow-small"><\/div>\n\n\t\t\t<?php include 'includes\/bannerssmall.php'; ?>\n\n\t\t\t<ul>\n\t\t\t<li class="citystatezip"><a href="<?php the_permalink(); ?>"><?php echo $citystatezip ?><\/a><\/li>\n\t\t\t<li class="address"><?php echo $address; ?><\/li>\n\n\t\t\t<?php if ($cr == "Residential") { ?>\n\t\t\t\t<li class="bedsbaths"><?php echo get_option('wp_bedrooms_text'); ?>: <?php echo $beds ?> &bull; <?php echo get_option('wp_bathrooms_text'); ?>: <?php echo $baths ?><\/li>\n\t\t\t<?php } ?>\n\t\t\t<br \/>\n\t\t\t<li class="price"><?php include 'includes\/price.php'; ?><\/li>\n                        <br \/>\n\t\t\t<\/ul>\n\t\t\t&nbsp;\n\t\t\t<\/div><!-- end latestlisting --><\/code><\/pre>\n
Hoe zou ik dit kunnen opmaken dat het los in twee kolommen komt te staan (zoals het hoort)en niet zoals nu in \u00e9\u00e9n kolom en twee rijtjes naast elkaar?<\/p>\n
Alvast super veel dank!<\/p>\n","protected":false},"template":"","class_list":["post-40365","topic","type-topic","status-closed","hentry","topic-tag-css","topic-tag-html","topic-tag-list","topic-tag-real-estate","topic-tag-wordpress"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nl.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/40365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nl.wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/nl.wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/nl.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/40365\/revisions"}],"wp:attachment":[{"href":"https:\/\/nl.wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=40365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}