+ 5
[html, css] how do i put two div element in one row?
how????
16 odpowiedzi
+ 3
Using float left
<style>
div{
border:2px solid black;
float:left;
}
</style>
</head>
<body>
<div style="height:100px;width:100px"></div>
<div style="height:100px;width:100px"></div>
+ 23
Hey, jason jang.
Your code doesn't work the way you want it to, because you have set the width of both elements to 100%. Hence they take up all of the width of the view port. Display: inline-block doesn't do anything in this case, because there's no space on one line left for your div.
Considering that each element has some margin and borders by default, you should decrease the width below 50%. Also you can style every element on the page with custom margins and paddings. Or you can "burn the whole town down" by
* {
margin: 0;
padding: 0;
}
+ 5
thanks!!
I will see if it works
+ 5
ok, it didn't work
and I forgot to mention that one is div and one is img
here is my code
HTML:
<div>
<img src="image.png" class="stuff">
<div class="stuff divelement">
some text
</div>
css:
.stuff {
display: inline-block;
width: 100%;
height: auto;
}
.divelement {
background-color: #ff8a8a;
color: white;
font-family: 'Do Hyeon', sans-serif;
}
+ 4
hello?
+ 4
Applying display:flex to outer div container for div and image works fine
+ 3
hmm... not working for me
+ 3
oh ok
+ 2
In the parent container of this two div‘s come style statements e.g. as follows:
display: flex;
flex-direction: row;
+ 2
Because image is occupying whole width ,do it 70% or so
+ 1
Try display: inline-block; on the parent div.. its better then float
+ 1
Use display:flex;
flex-direction:row; on the container div
+ 1
Also reduce the width of the image.
+ 1
Try this:
HTML
<div class="stuffContainer">
<img src="path-to-image" class="stuffImage">
<div class="stuffNested">
Some text
</div><!--end stuffNested-->
</div><!--end stuffContainer-->
CSS
.stuffContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
That should get your img and on the same row. After that you can style the img and nested div to your liking.
0
Ok, Try these
These are my code
HTML:
<div>
<img src="image.png" class="stuff">
<div class="stuff divelement">
some text
</div>
css:
.stuff {
display: inline-block;
width: 100%;
height: auto;
}
.divelement {
background-color: #ff8a8a;
color: white;
font-family: 'Do Hyeon', sans-serif;
}
0
Use classes
Często masz takie pytania?
Ucz się bardziej efektywnie, za darmo:
Popularne dzisiaj
Help please?
4 Votes
Ejercicio Pytho
0 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Game development
0 Votes
Ruby programming?
3 Votes