.multiplecolonnes {
width:250px;
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
height:45em;
}
.multiplecolonnes {
padding:-1000;
counter-reset:lis;
}
.multiplecolonnes {
counter-increment:lis;
content:' ' counter(lis);
}
<div class="panel-body panel-body-non-repetitive">
<div id="previewHtml" class="multiplecolonnes" style="font-size: <?php echo ($taille_police);?>;">
<?php echo (html_entity_decode($str));?>
</div>
</div>
https://jsfiddle.net/kn05cy1p/
I have this code that allows me to display my text on several columns
The height of which is predefined. However, when there are more than 3 three columns, I would like to go back to the line. Because currently here is the result
Multiple Columns
I've tried a lot of things but I can't make a line break. How can I do that?
Thank you for your help.
Related
Have following codes in php file: from code the first line defines title (first line from screenshot), second one city, third and fourth ones defines 'price_new' or 'price' next to the city if exists (second line from screenshot), five and six ones define price_two and min_amount (third line from screenshot) and the last one is category (fourth line from screenshot):
The problem is I can't get rid off extra space between second and third lines from screenshot:
<a class="b" title="<?=$last['title']?>" href="<?="c".$last['id_category']."-".$last['board_id']?>.html"><?=$last['title']?></a><br /><span>
<? if(defined('JBLANG')&& constant('JBLANG')=='en') echo $last['en_city_name']; else echo $last['city_name'];
if(($last['price'] > $last['price_new']) && ($last['price_new'] != 0)) echo " | <s class=\"red\">".$last['price']." ".$last['prise']."</s>.";
if($last['price'] != 0 && $last['price_new'] == 0) echo " | <span class=\"green\">".$last['price']." ".$last['prise']."</span>";
if ($last["price_two"]) echo '</span><br /><a style="display: inline-block;" class="sm_11"><span>Цена Оптом</span> <span class="green">'.$last["price_two"].' '.$last["price_two_currency"].'<span></a>';
if ($last["min_amount"]) echo ' | <a style="display: inline-block;" class="sm_11" style="margin-left: 22%;"><span>Мин. кол-во</span> <span class="green">'.$last["min_amount"].' '.$last["min_amount_currency"].'<span></a>' ?>
</span>
<br /><a style="display: inline-block;" class="sm_11" title="<?=$last[$name_cat]?>" href="<?="c".$last['id_category']?>.html"><?=$last[$name_cat]?></a>
Thanks,
S
Simply add a class to the div/html tag you're using. Here's an example:
.example_class{
line-height:1px;
}
.large_example_class{
line-height:300px;
}
<div class="example_class">
<p> Hello </p>
<p> World </p>
</div>
<div class="large_example_class">
<p>Hello</p>
<p>World</p>
</div>
Line height does however affect the whitespace both above and under the text lines in the div. If you want to do it individually you need to do it like this:
.line_1{
margin: 0px;
}
.line_2{
margin-top:10px;
}
.line_3{
margin-top:200px;
}
<div>
<p class="line_1">Hello</p>
<p class="line_2">World</p>
<p class="line_3">Hello</p>
</div>
Basically here you set the margin on the top, which only affects the given line. If you however reuse this class with other itme they'll be affected in the same way.
In your example I'd use the following:
<?php
echo'</span><p><a style="display:block; background-color:white;">Hello</a></p>'
However, you should change your style attribute with a class to make it more universal. If you wish to know more about this code look at websites like W3 Schools or tutorialspoint
I want to do something not very hard but I don't know how to do.
Now here I have the version for mobile how it looks now.
Mobile version it looks like this:
And here it's how I want to looks:
Here I have the code.
$query = "SELECT * FROM my_table";
$res = mysqli_query($con, $query);
$i = 0;
while ($row = mysqli_fetch_assoc($res))
{
if($i%2==0)
{
echo "<div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6' style='padding:0;''>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
<div class='col-md-6 find-content' style='margin-top:8%;'>
<img src='images/my_img/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
</div><!--/row -->";
}
else
{
echo " <div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6 find-content' style='margin-top:10%;'>
<img src='img/descopera/icons/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
<div class='col-md-6' style='padding:0;'>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
</div><!--/row--> ";
}
$i++;
}
I copied again the code and I used class of bootstrap named 'visible'
I don't believe there is a simple CSS solution for changing the order of DOM elements. You need Javascript for that.
Revising my answer.. I would do it by writing out element 3 two times - before and after element 2. And then toggle display of the duplicate elements depending on breakpoint. (this answer only applies if the elements are fairly simple as duplicate markup is less than desirable).
(A side note: I would really recommend that you look in to some templating instead of echoing out the markup like that, Twig for instance)
In my page I have three columns and many rows to show the following elements
<div class="col-sm-4">
<img src="<?php echo $myURL; ?>" class="img-responsive img-thumbnail">
<p class="lead"><?php echo $mytext; ?></p>
</div>
The display is perfect when all the $mytext are the same size (number of lines). However, if in a row elements A and B have say 2 lines of $mytext and the element C has 3 lines, the element C on the next row won't be displayed.
How can I prevent this? Ideally, the row height should be the highest of the height of the three elements in the row.
EDIT: If you go to http://bit.ly/1HfHiqC and reduce the width of the window, you will see what I am talking about.
If you are generating the content with a loop, lets say like this
foreach ($posts as $post) {
echo '<div class="col-sm-4">';
...
}
then you need to set a counter to add an clearfix class to every col-n * x = 12 DIV, to clear the floats. In you example you have n = 4 and that means you have to clear it on every 3rd iteration. To sum it up, whenerver your row is full, and the next row begins with a new set of cols, you have to add a class to the first div in that row.
$clearfix = 0;
foreach ($posts as $post) {
if ($clearfix % 3 == 0) { $clear_class = "clearfix"; } else { $clearfix = ""; }
echo '<div class="col-sm-4 '.$clear_class.'">';
...
$clearfix++;
}
And in your css you'd add the following
.clearfix { clear: both; }
That should solve your problem.
I think my question is the simplest question on this site. Nevertheless i couldn't solve it.
Now, i have a html like bottom. Elements have to be shown side by side. However output is like in picture below. Also, I did not get where the underscore come up from.
How can i do what i want?
<div class="ilgiliclass">
<?php
echo '<ul>';
if(...)
{
foreach(...)
{
if(...)
{
?>
<li>
<img src="img/arrow.gif">
<div class="si">
...
</div>
-
<div class="so">
...
</div>
<br />
</li>
<?php
}
}
}
?>
</ul>
You have a dash in your markup between the si and so elements. I imagine that's the 'underscore' you are talking about. Both .si and .so could be set to display:inline;, which should put everything on one line.
JS Fiddle Example: http://jsfiddle.net/TYsN6/
I have the following codes
<div class="row-fluid">
<div class="span6"><img src = "<?php echo $photo ?>"/><?php echo $row['comment'];?></div>
<div class="span6"></div>
</div>
which produces this: http://d.pr/i/g4y7
Why would the text "thissssssss..sss" overlap the other span while the text "this this this" with spaces display just fine?
The expected result is the first part of the text. The problem is the second one.
Because the browser does not know how to wrap this long word.
You have to declare:
<element> { word-wrap: break-word }
to avoid this.