•  13-07-2023
  •  | 
  •  

문제

I'm having some trouble placing the div that contains my heading (Prestige Worldwide HMC, The First Word in Entertainment) right next to my image. It seems that the image, due to its dimensions, is colliding with my heading and pushing it down. Is there any way I can move the div over the right side of the image to sit on the same line?

HTML:

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="normalize.css"/>
    <link rel="stylesheet" type="text/css" href="WebsiteMain.css">
    <title>Prestige Worldwide HMC</title>
</head>
<body>
    <div id="header">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">R&D</a></li>
            <li><a href="#">F.A.Q.</a></li>
            <li><a href="#">Investors</a></li>
        </ul>
    </div>

    <div id="mainbody">
        <div id="bodycontainer">
            <div id="logolevel">
                <div id="logo">
                    <a href="#">
                        <img src="http://www.mysoti.com/img/user/kongo/product/web/894875/894875_show_default.png"/>
                    </a>
                    <div id="Name">
                        <p>Prestige Worldwide HMC</p>
                        <p>The First Word In Entertainment</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

and WebsiteMain.css:

* {
    outline: 1px solid black;
}

/* HEADER */

#header {
    position: relative;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
}

#menu {
    width: 57%;
    margin: auto;
}

#menu li {
    margin-right: 8%;
    display: inline;
    font-size: 16px;
    color: #003a63;
    font-family: arial, sans-serif;
}

a {
    text-decoration: none;
}

a:visited {
    color: #003a63;
}

a:hover {
    color: #78a22f;
}

/* MAIN BODY */

body {
    font-family: Helvetica;
}

#mainbody {
    background: #f2f9fe; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2f9fe 0%, #d6f0fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2f9fe 0%,#d6f0fd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: 100%;
}

#logo a img {
    margin-left: 14%;
    margin-top: -3%;
    width: 400px;
    height: 300px;
}

#Name {
    position: relative;
    float: right;
    margin-right: 6%;
    margin-top: ;
    text-align: center;
    font-family: Helvetica;
}

#Name p:first-child {
    font-size: 500%;
    color: #003a63;
}

#Name p:nth-child(2) {
    font-size: 150%;
    margin-top: ;
    color: #78a22f;
}
도움이 되었습니까?

해결책

So you have an image, and a heading that you want next to each other. That is the question. Your image is super huge – with tons of white space. You should crop it down to the actual size of the image. That doesn't make any sense.

The relevant html is:

<a href="#" class="company-logo">
    <img src="http://placehold.it/100x100" />
</a>

<div class="name">
    <p>Something Something yeah</p>
    <p>Bla bla bla etc etc etc.</p>
</div>


fiddle 01

Shows how block level elements act. (divs, p, etc. are display: block by default) They are width 100% by default, so they push one another to the next line. This is normal.


fiddle 02

Shows these 'display: block' level elements floating left, which brings them to the same line (as long as their combined width isn't wider than the screen... in which case, again, they will push each other to the next line


fiddle 03

Shows the elements as display: inline-block and vertically aligned to each other with `vertical-align: middle' - you can't have these elements floating or they will still act like block elements and wont follow your inline-block rules, so you may need to put float: none; if you are in a responsive context where you have them floated in another circumstance.

다른 팁

change your css to this

#logo a img {
    margin-top: -3%;
    width: 400px;
    height: 300px;
    float: left;
}

and this

#Name {
    position: relative;
    float: left;
    margin-right: 6%;
    margin-top: ;
    text-align: center;
    font-family: Helvetica;
}

I fixed your bug and created a jsBin here: http://jsbin.com/ziwebico/1/. I made some small changes to your css and mainly added this:

#logo a
{
  display: inline-block;
  float: left;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top