locked
How to get my image next to the text, when in full screen. RRS feed

  • 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