Home>
I'm sorry for the busy time, but I will ask you a question.
Arrange characters next to the smartphone image of the attached image (smartphone image row and character row next to it)
I want to do it, but it will be lined up vertically.
* The first question "② I want to change the order of characters" has been solved by changing the order of HTML
Thank you very much.
<! DOCTYPE html>
<html>
<head>
<title>Free point card/stamp card (app) Stamp Card Piece</title>
<link rel = "stylesheet" type = "text/css" href = "reset.css">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0">
<meta http-equiv = "content-type" charset = "utf-8">
<script src = "https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-contact start->
<p>It can be operated without any special equipment or great effort!</p>
Free registration here
<!-original start->
<p>Please leave the development and operation of the original point card!</p>
<p>Example of using StampCard Piece<br></p>
<!-Translucent white->
<p><Core system integration><br>Yokohama Corporation<br>
Since it can be linked to individual sub-systems that are not limited to apps, it can also be used to measure and effect measurement.<br></p>
<p><Large-scale operation><br>Kirindo Co., Ltd.<br>We have a track record of operating<br>applications that support 1.26 million members. Push<br>Know-how for mass access after notification is also active.<br></p>
<p><Campaign><br>Haagen-Dazs Japan Co., Ltd.<br>Countermeasures for many users<br>Careers using various technologies such as scanning receipts<br>I support the penne.<br></p>
<p>App development simulator</p>
<p>By answering simple items<br>
Create your own app<br>
You can calculate the cost for</p>
Use the simulator right away
<!-original end->
Contact us here
<!-contact end->
<!-footer start->
<ul>
<li>Top</li>
<li>/</li>
<li>Piece Blog Promotional Apps Development Lab</li>
<li>/</li>
<li>Enterprise package PieceCrown</li>
<li>/</li>
<li>Operating company</li>
</ul>
<p>©JokerPiece Co., Ltd.</p>
<!-footer end->
<!-wrapper end->
</body>
</html>
body {
font-family: 'Hiragino Sans', 'Hiragino Sans', YuGothic, 'Yu Gothic', sans-serif;
color: # 2a2d2a;
letter-spacing: 0.05em;
line-height: 1.5;
overflow-x: hidden;
}
a {
transition: .4s;
}
/ * original * /
# original-all {
margin: 10px auto 0 auto;
background-image: url (img/haikei.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 90%;
padding: 10px 0;
font-size: 1.2rem;
font-weight: bold;
}
#original p {
font-size: 100%;
text-align: center;
}
# original-all .komoji {
font-size: 100%;
margin-bottom: 10px;
text-align: center;
}
#original {
background: rgba (255,255,255,0.7);
border-radius: 0px;
margin: 5% 0;
padding: 3% 0;
font-size: 100%;
}
.container {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 5%;
/ * grid-template-rows: 200px 200px;* /
font-size: 100%;
}
.container .setumei {
}
.phone {
width: 100%;
}
#container_dentaku
{
display: flex;
justify-content: center;
align-items: center;
margin-top: 2%;
}
img.dentaku {
width: 5%;
padding-right: 1%;
}
#dentaku_moji p {
margin: 2px;
line-height: 1.5;
}.simyure-ta {
font-size: 100%;
}
.komoji {
font-size: 80%;
padding-bottom: 20px;
}
#dentaku_moji A {
font-size: 80%;
}
.contact .contact_a2 {
margin-top: 5%;
}
@media only screen and (max-width: 414px) {
.simyure-ta {
font-size: 1rem;
}
.contact .contact_a2 {
margin-top: 30%;
}
/ * original * /
# original-all {
margin: 10px auto 0 auto;
background-image: url (img/haikei.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 180%;
padding: 10px 0;
font-size: 1.2rem;
font-weight: bold;
}
#original p {
font-size: 100%;
text-align: center;
}
# original-all .komoji {
font-size: 100%;
margin-bottom: 10px;
text-align: center;
}
#original {
background: rgba (255,255,255,0.7);
border-radius: 0px;
margin: 5% 0;
padding: 3% 0;
}
.container {
display: flex;
flex-wrap: wrap;
margin-left: -10px;/* Gap between columns * /
}
#container_dentaku
{
display: flex! important;/* Priority * /
}
img.dentaku {
width: 10% ;! important;/* Priority * /
}
#dentaku_moji p {
margin: 2px;
line-height: 1.5;
}
.simyure-ta {
font-size: 100%;
}
.komoji {
font-size: 100%;
padding-bottom: 20px;
}
#dentaku_moji A {
font-size: 95%;
}
}
-
Answer # 1
Related articles
- css3 - i want to arrange images and text side by side
- css - i want to put two images and text side by side on the homepage
- i want to combine two if statements (ruby)
- python - i want to visualize data in two dimensions
- html - i want to arrange elements side by side
- css3 - i want to make the text background transparent
- javascript - i want to select only two checkboxes
- html - i want the elements of li to be 5 rows wide
- postgresql - [sql] i want to join two tables
- css3 - i want to make the image a sample size
- css3 - i want to arrange multiple elements side by side with css
- python - i want to swap two lines
- css3 - i want to put a form on the image with bootstrap
- css3 - i want to center the grid layout
- i want to arrange html elements side by side
- css3 - i want to prevent line breaks in html
- css3 - i want the behavior of the hamburger menu to be the same
- css3 - how to arrange vertical and horizontal p tags and a tags
- css3 - i want to arrange 2x2 images like trapezoids
- java - i want to insert two or more awts
Related questions
- css3 : Display: flex doesn't work;
- html - how to make the a tag work only on the image when object-fit: contain;
- html - css: overflow causes child elements to overflow
- html - boostrap does not apply
- javascript - i want to adjust the height of the iframe read from another domain
- why is html th and td not aligned?
- css3 - when hovering a div surrounded by a tag, i want to underline only a part of the div
- html - i want to arrange them side by side by adjusting the width
- html - media query specification does not work
- html - the contents of the li tag do not fit in the li
I think that it is possible by rearranging using the order of flex, but there is no sense of forcing it together even though the HTML layout does not match the content. CSS is also complicated.
I think that images and text are related, so HTML should be described accordingly.
Current situation
The layout has nothing to do with the image and text.
Modification example
If you do this,
In PC size, Flex displays containers side-by-side, and items vertically.
In smartphone size, containers are arranged vertically and items are arranged horizontally.
If it is set to be, it is OK.
The horizontal alignment is
flex-direction: row;
The vertical alignment is
flex-direction: column;
CSS example for the above HTML
Since the detailed hope of the layout is unknown, I made it suitable.
Operation check sample
Adjust the settings such as the margin and vertical position by referring to the following.
Japanese support! CSS Flexbox cheat sheet made and distributed | Web Creator Box