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.

Answer 1

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

Answer 2

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;
}