是否可以在 TYPO3 中使用 Fluid 更改 CSS 属性和值？

Question

I want to adjust the height of some lines of texts by css-file. But I can't change css property and value directly, because the contents are displayed with Fluid of TYPO3.

This is my codes in a HTML-file:

<!-- for left side --> 
<div class="anreisetag-zeit anreisetagabstand">
   <f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
      {itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
   </f:for>                                
</div>
<!-- for right side --> 
<div class="anreisetag-text">
   <f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
     {itemAnreisetag.data.bodytext -> f:format.html()}
   </f:for>                                
</div>

Now my contents are displayed in frontend, but the height of the textline is different. My problem now is:

I want to adjust the height between the line of "anreisetag-zeit / anreisetagabstand" and "anreisetag-text", so that they have same height.

My idea: I have an idea that I add a field in Backend which it has a type="input" . I added this:
The field has a variable tx_anreisetag_zeit_abstand .

Also, every item has class name like this:

My final idea is that if I give a value in the input-field tx_anreisetag_zeit_abstand , then "margin-bottom" of the <p class="text-center"> is changed with the new value. Now anreisetagabstand p has "margin-bottom: 16px;". I want to change these value "16px" for example to "38px" from Backend.

in my CSS file now:

.anreisetagabstand p{
    margin-bottom: 16px;
}

The class anreisetag-text will be changed anything. Just the style of "p element of anreisetag-zeit" or "anreisetagabstand" musst be changed. I've already defined some design with the calssname "anreisetag-zeit", so I want to use the classname "anreisetagabstand" to adjust the hight.

How can I realize this? If I don't use Fluid, then I can adjust easy...

Maybe can I change the css property and value from a JavaScript file to operate DOM? I've already tried it, but I can't change my css property and value. I think there are some error in my codes:

window.onload = function() {
    var anreisetagzeit = document.getElementsByClassName('anreisetagabstand');
    anreisetagzeit += ' p';
    anreisetagzeit.style.marginBottom = '38px';
}

Adding:

If I adjust my texts in my richt text editor, then I have to give some spaces and I have to check the frontend every time if the height or distance between the time and the description:

Furthermore, I can't give spaces, if I use "list" in a rich text editor. I have to give some space on the left side of the point to display the list-items on the right side :

If I display them in frontend:

I hope someone can give me some advices. Thank you.

Answer 1

trying to align your text and time to be on the same horizontal level is proably more easy by changing the HTML-structure instead of playing arount with linebreaks and CSS.

CSS-based solutions will maybe work on a static viewport, but as soon as the textarea grows or shrinks the number of lines of text will also change and therefore not be properly aligned again.

If it is within your possibilities i would recommend to restructure your Template to something like this:

<div class="anreisetag-plan">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
    <div class="anreise-item">
        <div class="anreisetag-zeit">
            {itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
        </div>
        <div class="anreisetag-text">
            {itemAnreisetag.data.bodytext -> f:format.html()}
        </div>
    </div>
</f:for>
</div>

With this structure you should be able to achieve your desired output alot more easy than before.