Если бы вы могли настроить разметку, я бы убрал column-header
из списка. Таким образом, вы можете согнуть заголовок и список в одном родительском flexbox.
Примечание: Семантически говоря, на самом деле не имеет большого смысла, что заголовок списка сам по себе является элементом списка в списке.
.column-stack {
display: flex;
justify-content: space-between;
}
.column {
padding: 10px;
flex: 1 1 33%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column-stack .column-header {
font-size: 12px;
text-transform: uppercase;
color: #006a4d;
font-weight: 500;
padding-bottom: 5px;
border-bottom: 1px solid #3a3a3a;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
<div class="column-stack">
<div class="column">
<h5 class="column-header">Header 1 One Line</h5>
<ul class="column-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="column">
<h5 class="column-header">Header 2 Many Lines of Text this is many lines of text and is the longest column wow it keeps going and going and going like the energizer rabbit</h5>
<ul class="column-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="column">
<h5 class="column-header">Header 3 Two Line at most on most use cases</h5>
<ul class="column-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
Похоже, что вы на самом деле ищете скромную таблицу HTML.
th {
font-size: 12px;
text-transform: uppercase;
color: #006a4d;
font-weight: 500;
padding-bottom: 5px;
border-bottom: 1px solid #3a3a3a;
}
td {
width: 33%;
}
<table>
<thead>
<th>Header 1 One line</th>
<th>Header 2 Many Lines of Text this is many lines of text and is the longest column wow it keeps going and going and going like the energizer rabbit</th>
<th>Header 3 Two Line at most on most use cases</th>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 4</td>
<td>Item 4</td>
</tr>
</tbody>
</table>
Почему не просто используют задачу Java?
<java fork="yes"
classpathref="build.path"
classname="org.mozilla.javascript.tools.jsc.Main"
failonerror="true">
<arg value="-debug"/>
...
<arg value="file.js"/>
</java>
Какие-либо возражения?
Вот пример build.xml, который я использую для своих приложений rhino. Если у вас много файлов javascript, вам просто нужно добавлять больше тегов
~: ant compile jar run
<project>
<target name="compile">
<mkdir dir="build/classes"/>
<java fork="yes"
classpath="js.jar"
classname="org.mozilla.javascript.tools.jsc.Main"
failonerror="true">
<arg value="-nosource"/>
<arg value="-opt"/>
<arg value="9"/>
<arg value="-version"/>
<arg value="170"/>
<arg value="src/SwingApplication.js"/>
</java>
<move todir="build/classes">
<fileset dir="src">
<include name="**/*.class"/>
</fileset>
</move>
</target>
<target name="jar">
<mkdir dir="build/jar"/>
<jar destfile="build/jar/SwingApplication.jar" basedir="build/classes">
<zipfileset src="js.jar" includes="**/*.class"/>
<manifest>
<attribute name="Main-Class" value="SwingApplication"/>
</manifest>
</jar>
</target>
<target name="run">
<exec executable="java">
<arg valUe="-jar"/>
<arg value="build/jar/SwingApplication.jar"/>
</exec>
</target>
</project>
~
Я использую RequireJS в своем проекте, который включает сценарий, который отслеживает зависимости между модулями и объединяет их в один файл JavaScript. При желании он также может минимизировать объединенный файл js с помощью компилятора Google Closure. Когда он находится в этой форме, где все зависимости включены в один файл js, файл можно легко скомпилировать с помощью jsc.
Вот сегмент моего ant-скрипта, который я использую для создания единого комбинированного js-файла, компиляции его в файл класса, а затем создания исполняемого JAR-файла:
<target name="compile-single-js">
<mkdir dir="${build-js}"/>
<java classname="org.mozilla.javascript.tools.shell.Main">
<classpath>
<path refid="rhino-classpath"/>
<path refid="closure-classpath"/>
</classpath>
<arg value="${js-build-script}"/>
<arg value="${js-build-dir}"/>
<arg value="name=${build-js-main-rhino-frontend-module}"/>
<arg value="out=${build-js-main}"/>
<arg value="baseUrl=."/>
<arg value="includeRequire=true"/>
<arg value="inlineText=true"/>
<arg value="optimize=none"/>
</java>
</target>
<target name="compile-single-class" depends="compile-single-js">
<mkdir dir="${build-class}"/>
<!-- TODO: set -opt -->
<java classname="org.mozilla.javascript.tools.jsc.Main">
<classpath>
<path refid="rhino-classpath"/>
</classpath>
<arg value="-o"/>
<arg value="${build-class-main-name}.class"/>
<arg value="${build-js-main}"/>
</java>
<move file="${build-js}/${build-class-main-name}.class" todir="${build-class}"/>
</target>
<target name="jar-single-class" depends="compile-single-class">
<mkdir dir="${build-jar}"/>
<jar destfile="${build-jar-main}"
basedir="${build-class}"
includes="${build-class-main-name}.class">
<manifest>
<attribute name="Main-Class" value="${build-class-main-name}" />
</manifest>
</jar>
</target>
Полный скрипт сборки можно найти здесь .