Answered by:
How to get my image next to the text, when in full screen.

Question
-
User416875641 posted
Hi,
I have 4 small boxes, in a row.
Each has a title in <p>
Then a variable value, the first is the IP of the client.
Then an image that is 92 px square.
I want the image on the same line as the IP address, when in full screen mode, and flows underneath in small screen.
It's currently all on seperate lines.
I tried CSS, targeting, but not desired result.
CSS:
.floatImage {
float: initial;
// display: block
// margin: 10px;
}
CSHTML:
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<p> IP : </p>
<h3>@ViewData["IP"]</h3> <img class="floatImage" src="~/Content/images/57906transparent.png" alt="altimage" height="92" width="92" />
</div>
<a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div><!-- ./col -->
Thanks.
Thursday, November 28, 2019 3:08 PM
Answers
-
User1535942433 posted
Hi AltFire,
Accroding to your code,<h3> is a block-level tag.So I suggest you could override <h3> CSS style and add display inline.
Besides,you could use word-break style to allow long words to be broken and wrap onto the next line.
Link:
Block-level tag inline: https://stackoverflow.com/questions/26166907/text-inline-after-h3/26166981
Word-break style: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
More details ,you could refer to below code:
<style> h3 { display: inline; } </style> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <div> <!-- Small boxes (Stat box) --> <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-aqua"> <div class="inner" style="word-break:break-all"> <p> IP : </p> <h3>@ViewData["IP"]</h3><img class="floatImage" src="http://localhost:50186/image/image6.jpg" alt="altimage" height="92" width="92" /> </div> <a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div><!-- ./col --> </div> </div>
Result:
Best regards,
Yijing Sun
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, November 29, 2019 9:50 AM
All replies
-
User1535942433 posted
Hi AltFire,
Accroding to your code,<h3> is a block-level tag.So I suggest you could override <h3> CSS style and add display inline.
Besides,you could use word-break style to allow long words to be broken and wrap onto the next line.
Link:
Block-level tag inline: https://stackoverflow.com/questions/26166907/text-inline-after-h3/26166981
Word-break style: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
More details ,you could refer to below code:
<style> h3 { display: inline; } </style> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <div> <!-- Small boxes (Stat box) --> <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <div class="small-box bg-aqua"> <div class="inner" style="word-break:break-all"> <p> IP : </p> <h3>@ViewData["IP"]</h3><img class="floatImage" src="http://localhost:50186/image/image6.jpg" alt="altimage" height="92" width="92" /> </div> <a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div> </div><!-- ./col --> </div> </div>
Result:
Best regards,
Yijing Sun
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, November 29, 2019 9:50 AM -
User416875641 posted
Thanks, I got the result I required from targeting the "Inner" element and after a little trial and error:
> .inner {
display: inline-block;
padding: 10px;
}along with:
.floatImage {
float: left;
}Friday, November 29, 2019 11:36 AM