Question 302639 in Html Question posted in
Some basic documentation can be found here.

Html – How to align even (2nd, 4th, 6th…) tags to right?

I would ask you for the best opinions of CSS.
Could you tell me how to have even tags to right?
(Plese see a picture. I want to place orange-colored elements on right side.)

enter image description here

Currently, I give a CSS selector of div.jobs:nth-child(odd) to odd elements (coral-colored) and that of div.jobs:nth-child(even) to even elements.

It would be my greatest pleasure if you give me any opinions to my trouble.

div.jobs:nth-child(odd) {
  background-color: lightcoral;
  font-size: 2vh;
  border-radius: 70%;
  word-break: break-all;
  height: max-content;
}

div.jobs:nth-child(even) {
  background-color: lightsalmon;
  font-size: 2vh;
  border-radius: 70%;
  word-break: break-all;
  height: max-content;
}
<div className='jobs'>
  <h3>Backend Developer</h3>
  <p>2023.4 - 2023.11</p>
  <p>Insurance Firm's Project</p>
  <ul>
    <li>
      <p>Designed a new Oracle database.</p>
    </li>
    <li>
      <p>Coding on PL/SQL and CShell scripts.</p>
    </li>
  </ul>
</div>
<div className='jobs'>
  <h3>RPA Programmar</h3>
  <p>2023.7 - 2023.10</p>
  <p>Local Donation System Project</p>
  <ul>
    <li>
      <p>With UiPath, automated operations to collect specific datas of each municipality, such as its monthly donations and reviews from donators on its return gifts.
      </p>
    </li>
    <li>
      <p>And put them into an Excel sheet.</p>
    </li>
  </ul>
</div>
<div className='jobs'>
  <h3>Consultant and Engineer</h3>
  <p>2022.1 - 2023.3</p>
  <p>Communication Career Firm's Project</p>
  <ul>
    <li>
      <p>Researched and analyzed client's datas to boost their current business.
      </p>
    </li>
    <li>
      <p>Further developed existing tools for operations.</p>
    </li>
  </ul>
</div>
<div className='jobs'>
  <h3>RPA Programmar and Translator</h3>
  <p>2019.7 - 2021.12</p>
  <p>Communication Service Project</p>
  <ul>
    <li>
      <p>As a RPA engineer, worked for requirement definitions, detail designs, coding, UT・IT, and follow-ups.
      </p>
    </li>
    <li>
      <p>Automated a procedure to validate a few kind of application forms and put them into official one to submit to the Japanese goverment.
      </p>
    </li>
    <li>
      <p>Along with RPA works, wrote a list of test items for newly developed functions of client's systems. Sometimes translate documents to share with overseas members.
      </p>
    </li>
  </ul>
</div>
<div className='jobs'>
  <h3>Helpdesk and Translator</h3>
  <p>2018.4 - 2019.3</p>
  <p>Security Firm's Asset Management</p>
  <ul>
    <li>
      <p>Dealt with users' inquiries on their troubles with PCs or accessories.
      </p>
    </li>
    <li>
      <p>Set up PCs for newly hired staff members.
      </p>
    </li>
    <li>
      <p>
        Mediate end users and overseas vendor staff members in English via face-to-face or emails.
      </p>
    </li>
  </ul>
</div>

Please take care of my trouble. Thanks in advance.

Tags:

2

Answers


  1. 0

    Use display: flex; flex-direction: column; on the .jobs (make it plural) parent, and use margin-left: auto; on the even children .job. Also, set some width of 50%:

    * {
  box-sizing: border-box;
}

.jobs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.job {
  padding: 0.5rem;
  background: #ddd;
  width: 50%;
}

.job:nth-child(even) {
  margin-left: auto;
}
    <div class="jobs">
  <div class="job">1</div>
  <div class="job">2</div>
  <div class="job">3</div>
  <div class="job">4</div>
  <div class="job">5</div>
</div>
    Login or Signup to reply.
  2. 0

    I have set the CSS as per your image. maybe this will be useful for you.

    div.jobs li{display: none;}
div.jobs:nth-child(odd){
  background-color: lightcoral;
  font-size: 2vh;
  border-radius: 70%;
  word-break: break-all;
  height: max-content;
  width: 50%;
  float: left;
  clear: both;
  text-align: center;
}

div.jobs:nth-child(even){
  background-color: lightsalmon;
  font-size: 2vh;
  border-radius: 70%;
  word-break: break-all;
  height: max-content;
  width: 50%;
  float: right;
  clear: both;
  text-align: center;
}
    <div class='jobs'>
    <h3>Backend Developer</h3>
    <p>2023.4 - 2023.11</p>
    <p>Insurance Firm's Project</p>
    <ul>
        <li>
            <p>Designed a new Oracle database.</p>
        </li>
        <li>
            <p>Coding on PL/SQL and CShell scripts.</p>
        </li>
    </ul>
</div>
<div class='jobs'>
    <h3>RPA Programmar</h3>
    <p>2023.7 - 2023.10</p>
    <p>Local Donation System Project</p>
    <ul>
        <li>
            <p>With UiPath, automated operations to collect specific datas of each municipality,
                such as its monthly donations and reviews from donators on its return gifts.
            </p>
        </li>
        <li>
            <p>And put them into an Excel sheet.</p>
        </li>
    </ul>
</div>
<div class='jobs'>
    <h3>Consultant and Engineer</h3>
    <p>2022.1 - 2023.3</p>
    <p>Communication Career Firm's Project</p>
    <ul>
        <li>
            <p>Researched and analyzed client's datas to boost their current business.
            </p>
        </li>
        <li>
            <p>Further developed existing tools for operations.</p>
        </li>
    </ul>
</div>
<div class='jobs'>
    <h3>RPA Programmar and Translator</h3>
    <p>2019.7 - 2021.12</p>
    <p>Communication Service Project</p>
    <ul>
        <li>
            <p>As a RPA engineer, worked for requirement definitions, 
                detail designs, coding, UT・IT, and follow-ups.
            </p>
        </li>
        <li>
            <p>Automated a procedure to validate a few kind of application forms and put them into official one
                to submit to the Japanese goverment.
            </p>
        </li>
        <li>
            <p>Along with RPA works, wrote a list of test items for newly developed functions of
                client's systems. Sometimes translate documents to share with overseas members.
            </p>
        </li>
    </ul>
</div>
<div class='jobs'>
    <h3>Helpdesk and Translator</h3>
    <p>2018.4 - 2019.3</p>
    <p>Security Firm's Asset Management</p>
    <ul>
        <li>
            <p>Dealt with users' inquiries on their troubles with PCs or accessories.
            </p>
        </li>
        <li>
            <p>Set up PCs for newly hired staff members.
            </p>
        </li>
        <li>
            <p>
                Mediate end users and overseas vendor staff members
                 in English via face-to-face or emails.
            </p>
        </li>
    </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search